I want to display the gradiant so that it uses all of the space leading, trailing and top of the YEAR TO DATE title. But as you can see in the imaged linked below the gradiant is still respecting safe areas even tho I try to ignore the safe areas. What am I doing wrong here? Any advice? Thank you everyone :)

Image: https://imgur.com/a/nRHBJFu

Or put another way I want an effect like this: https://imgur.com/QUvDA2s

                    ZStack {
                        LinearGradient(gradient: Gradient(colors: [Color.white, Color.purple]), startPoint: .leading, endPoint: .trailing)
                            .ignoresSafeArea()
                            .cornerRadius(10)

                        VStack {
                            Spacer()
                            HStack {
                                Spacer()

                                Image("widgetIcon")
                                    .resizable()
                                    .frame(width: 17, height: 17, alignment: .leading)
                                    .clipShape(RoundedRectangle(cornerRadius: 5))

                                if readGenerateJSON?.first?.JSON_DurationMonths == 12 {
                                    Text("YEAR TO DATE")
                                }
                                if readGenerateJSON?.first!.JSON_DurationMonths ?? 0 < 12 {
                                    Text("PREVIOUS \(readGenerateJSON?.first?.JSON_DurationMonths ?? 0) MONTHS")
                                }

                                Spacer()
                            }

                            Spacer()
                        }
                        .font(titleFontSmall)
                        .foregroundColor(.secondary)
                    }