Safe Area Issue: Black Gaps Above/Below Content

Question

I'm struggling with a SwiftUI app where I have black gaps at the top (status bar area) and bottom (home indicator area) of my screens.

My app uses a tabbed navigation structure with multiple screens. I'm trying to make the background color extend to fill the entire screen, including behind the status bar and home indicator. Despite using .ignoresSafeArea() in various places, I still see these black gaps.

I've tried:

Adding .ignoresSafeArea(.all) to the root view in PhoneApp.swift Adding .ignoresSafeArea() to background colors/gradients in individual views Using ZStack approach with background extending while content respects safe areas

Screenshots show the issue persists across all tabs. The black gaps appear consistently regardless of which approach I try. Each screen uses a pattern like:

import SwiftUI

/// Minimal replacement for CraveTheme
struct MockTheme {
    static let primaryGradient = LinearGradient(
        gradient: Gradient(colors: [.black, .gray]),
        startPoint: .top, endPoint: .bottom
    )
    static let accent = Color.orange
}

/// Minimal replacement for AppCoordinator
class MockCoordinator: ObservableObject {
    func makeLogCravingView() -> some View {
        Text("Log Craving View")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.blue.opacity(0.2))
    }
    func makeCravingListView() -> some View {
        Text("Craving List View")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.green.opacity(0.2))
    }
    func makeAnalyticsDashboardView() -> some View {
        Text("Analytics Dashboard")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.yellow.opacity(0.2))
    }
    func makeChatView() -> some View {
        Text("AI Chat View")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.purple.opacity(0.2))
    }
}

public struct CRAVETabView: View {
    @ObservedObject var coordinator: MockCoordinator
    @State private var selectedTab: Tab = .log
    
    enum Tab: String, CaseIterable {
        case log       = "Log"
        case cravings  = "Cravings"
        case analytics = "Analytics"
        case aiChat    = "AI Chat"
        
        var iconName: String {
            switch self {
            case .log:       return "plus.circle.fill"
            case .cravings:  return "list.bullet"
            case .analytics: return "chart.bar.fill"
            case .aiChat:    return "bubble.left.and.bubble.right.fill"
            }
        }
    }
    
    public init(coordinator: MockCoordinator) {
        self.coordinator = coordinator
    }
    
    public var body: some View {
        ZStack {
            // Full-bleed background gradient that extends beyond all safe areas
            MockTheme.primaryGradient
                .ignoresSafeArea()
                
            // Tab navigation with content
            TabView(selection: $selectedTab) {
                coordinator.makeLogCravingView()
                    .tag(Tab.log)
                    .tabItem {
                        Image(systemName: Tab.log.iconName)
                        Text(Tab.log.rawValue)
                    }
                
                coordinator.makeCravingListView()
                    .tag(Tab.cravings)
                    .tabItem {
                        Image(systemName: Tab.cravings.iconName)
                        Text(Tab.cravings.rawValue)
                    }
                
                coordinator.makeAnalyticsDashboardView()
                    .tag(Tab.analytics)
                    .tabItem {
                        Image(systemName: Tab.analytics.iconName)
                        Text(Tab.analytics.rawValue)
                    }
                
                coordinator.makeChatView()
                    .tag(Tab.aiChat)
                    .tabItem {
                        Image(systemName: Tab.aiChat.iconName)
                        Text(Tab.aiChat.rawValue)
                    }
            }
            .accentColor(MockTheme.accent)
        }
    }
}

/// Quick usage for a SwiftUI preview or app
struct CRAVETabView_Previews: PreviewProvider {
    static var previews: some View {
        CRAVETabView(coordinator: MockCoordinator())
    }
}

What am I missing? Is there a correct way to ensure backgrounds truly extend edge-to-edge while still keeping content properly positioned?

https://github.com/The-Obstacle-Is-The-Way/crave-trinity-frontend

Whole runnable front end up there ^

Noob - SafetyArea Black Bars Sigh: