`.frame(maxWidth:)` ignores parent bounds

[dfabulich]

VStack(spacing: 16) {
    Text("Divider (fills available width with padding)")
    Color.gray.frame(height: 1)

    Text("HStack with .frame(maxWidth: 400)")
    HStack {
        Text("Label")
            .foregroundColor(.secondary)
        Spacer()
        Text("Value")
    }
    .frame(maxWidth: 400)
    .border(.red)
}
.padding()

On iOS, the HStack aligns horizontally with the divider. On Android, the .frame(maxWidth: 400) forces the HStack to ignore the parent bounds.

[dfabulich]

As far as I can tell, this bug can't be fixed. I've filed a PR to document it in #342, and added a skipped test.

func testFrameMaxWidthRespectsParentBounds() throws {
    // Skip on Android until the layout issue is fixed
    // See: https://github.com/skiptools/skip-ui/issues/339
    #if SKIP
    throw XCTSkip("Android: .frame(maxWidth:) may expand beyond parent bounds")
    #endif
    
    // Create a black container (width: 12), put a white rectangle inside with
    // maxWidth: 20 (larger than parent), and add a red border.
    // Expected: The white rectangle should be constrained to width 12 (parent bounds).
    XCTAssertEqual(try pixmap(content: ZStack {
        Color.black.frame(width: 12.0, height: 6.0)
        Color.white
            .frame(maxWidth: 20.0, maxHeight: 4.0)
            .border(Color.red, width: 1)
    }), """
    . . . . . . . . . . . .
    . . . . . . . . . . . .
    .                     .
    .                     .
    . . . . . . . . . . . .
    . . . . . . . . . . . .
    """)
}

I think (?) the issue stems from fundamental differences between SwiftUI's layout system and Jetpack Compose's layout system.

SwiftUI

1. Each container measures all children to determine its own size
2. The container's size becomes the union of all children (12x6 in this case)
3. When laying out children, SwiftUI communicates the container's actual size as constraints
4. The white Color with maxWidth: 20 receives maxWidth: 12 from the ZStack
5. Result: White Color expands to fill available 12 width, not 20

Compose

1. ZStack uses Compose's Box composable
   • Each child receives the same Constraints from the Box's parent
   • The Box doesn't communicate its own determined size to children during measurement
   • This is by design in Compose - it allows children to expand to fill available space
2. In the test environment, constraints are 320x470 (test container size)
3. Both the black container and white Color receive constraints: maxWidth=320, maxHeight=470
4. Black container: .frame(width: 12) constrains it to 12x6
5. White Color: .frame(maxWidth: 20) expands to 20 because 20 < 320
6. Result: White Color becomes 20x4, exceeding the ZStack's actual size