List Layout Breaks in NavigationStack When a View Exceeds Screen Width

This is a bug report. FB17433985

The layout of the following ContentView appears correctly when it is outside a NavigationStack. However, when the same view is placed inside a NavigationStack, the layout breaks.

It seems that the width of the List is being affected by the width of the buttonsView, which exceeds the screen width.

In my testing, this issue occurs on iOS 18.4 and later, but does not occur on iOS 18.2 or iOS 17.5.

Workaround I found:

• Remove the fixed width modifier from the Button

If anyone knows of other ways to resolve this issue without affecting the layout, I would appreciate it if you could share them.

import SwiftUI

let values = (1...100).map { $0 }
let buttonTitles = (1...9).map { "Button\($0)" }

struct ContentView: View {
    var body: some View {
        VStack {
            List {
                Section {
                    ForEach(values.indices, id: \.self) { val in
                        HStack {
                            Text("Index: \(val)")
                        }
                    }
                }
            }
            buttonsView
        }
    }
    
    private var buttonsView: some View {
        HStack {
            ForEach(0..<buttonTitles.count, id: \.self) { index in
                Button() {
                } label: {
                    Image(systemName: "square.and.arrow.up")
                        .resizable()
                        .frame(width: 48, height: 48)
                }
            }
        }
    }
}

@main
struct ButtonShapeBugApp: App {
    var body: some Scene {
        WindowGroup {
            if true {
                NavigationStack {
                    ContentView()
                }
            } else {
                ContentView()
            }
        }
    }
}

Environment:

• Xcode Version 16.3 (16E140)
• iPhone 18.4.1 real device
• iPhone SE3rd 18.4 simulator

Expect layout

Broken layout(9 buttons)

Broken layout(10 buttons)