(H/V)Stack doesn't align elements correctly if used with a Spacer

[Joannis]

Describe the bug When using a (V/H)Stack with a spacer inbetween two elements, the elements should take up their natural size. Instead, they're taking up an equal third of the space, and are aligned at their natural 'start'. Which is top for VStack and left for HStack.

To Reproduce

struct ContentView: View {
    var body: some View {
        HStack {
            Text("HI")
            Spacer()
            Text("HI")
        }
    }
}

Expected behavior The second "HI" should be aligned to the far right.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser Safari
• Version of the browser 15.0 (17612.1.24.1.4)
• Version of Tokamak [e.g. 0.6.1]

[carson-katri]

This is probably because we started using grid for stacks instead of flex box because of the gap property. However, I think flexbox supports the gap property in most browsers, so could we maybe switch back?

[Joannis]

Correct, it's due to grids. But I'm not sure what a good alternative is.

[carson-katri]

Here's is the browser support for flexbox gap for reference: https://caniuse.com/flexbox-gap

[SwiftCoderJoe]

flexbox-gap looks good enough to me.

The only major browsers based on relative userbase size that I could see being a problem are the older Safari browsers (Both desktop and iOS), but considering Apple platforms have a history of having fast adoption of newer OS versions, I wouldn't be too worried about those user-groups staying around long.

I'd vote to switch back to flex considering how high the standard adoption is and how often aligning things using spacer() can be useful.