Proper way to set body width?

[khalilm]

Hi

I am trying to limit the width of my app to 1280px.

Currently I set it like this in app.sass

body 
   max-width: 1280px
   margin: 0 auto

I also set the width of my header in my layout files using the same code. This results in the site being centered and 1280px when my browser is maximized.

Everything works fine until I attempt to use an overlay such as the Loading plugin or popup a dialog. While the header remains in position, the body gets shifted to the left. In looking at the browser styles, I see that the following css is being injected.

.q-body--fullscreen-mixin, .q-body--prevent-scroll {
    position: fixed !important;
}

If I add the following code in app.sass, then everything works as expected

.q-body--fullscreen-mixin, .q-body--prevent-scroll 
   position: unset !important

I will be the first to admit that css is not my strong point so I am wondering am I completely off the mark in my approach and affect other things I am not aware o? Is there another way to accomplish this that I just missed?

Any input would be appreciated!

[beets]

@khalilm Maybe better to not target body, and instead:

#q-app
   max-width: 1280px
   margin: 0 auto

[khalilm]

That worked perfectly. Thank you!