Implicit 8 pixel margin added to html body

[Outcue]

An 8-pixel pad in the main body of the page is present when using the following code:

var body: some View {
    ScrollView(showsIndicators: false) {
      VStack(spacing: 0) {
        Spacer()
        HStack(spacing: 0) {
          Spacer()
        }
      }
      .background(Color(red: 0.9, green: 0.9, blue: 0.9, opacity: 1.0))

You can see the padding in this screenshot:

[Outcue]

I came across this while investigating ways to create a full color fill of the display area as .infinte is not supported as a .frame() argument.

[carson-katri]

This is a default style by the browser IIRC. You can setup the styles in your main.swift using JavaScriptKit.

[Outcue]

This makes sense, but it seems if you want to be "SwiftUI-ish" you may want to eliminate the default padding, as the presence of the padding will create a lack of visual parity between platforms.

[carson-katri]

I agree that works well for Tokamak apps, but it could be included in an existing app, in which case we wouldn’t want to override any body styles.

IMO it’s best to defer this to the developer.

[Outcue]

Got it. I'll close this out.

[Outcue]

Could you add some sample code here to show the recommended way to set the values in main.swift?

[carson-katri]

This should work (although I haven't tested it):

JSObjectRef.global.document.object!.body.object!.style = "margin: 0;"