fix: stop viewport wobble in submit/view mode

[xhon-pelushi]

Prevent viewport wobble on published forms.

Fixes #2810

Test plan

• Review diff against issue
• Run project lint/tests if applicable

[Chartman123]

@xhon-pelushi please correctly sign-off your commit :)

[xhon-pelushi]

Thanks @Chartman123 — added a Signed-off-by on the commit.

[Chartman123]

@xhon-pelushi did you test this? I just tried it in my dev instance and there's no change regarding the wobble

[xhon-pelushi]

@Chartman123 thanks for testing this on a real instance. I tried to reproduce the remaining wobble before replying but couldn't get a conclusive result — I don't have a live Nextcloud instance with Forms available to me right now (my usual quick option, a fresh instant-trial, doesn't come with Forms installed and I only have a non-admin account there, so I can't enable it).

While digging into it statically, I found a second possible contributor unrelated to this PR's header fix: NcAppContent (from @nextcloud/vue, used to wrap this view) sets flex-basis: 100vw, which is a known pattern that can cause horizontal overflow equal to the scrollbar width on some browsers. I can't confirm this is the actual culprit without seeing it rendered live, though — the header math genuinely holds up in isolation, so I don't want to guess again and send you chasing a fix that doesn't help.

Could you share a couple more details so I can pin it down properly instead of guessing:

• The exact viewport width and browser/OS you tested at?
• If you open DevTools' Layout/Elements panel at that width, is there a specific element it flags as wider than its container (Chrome's Layout panel highlights overflow directly)?

That would let me confirm whether it's the NcAppContent wrapper, something else in Forms, or another interaction entirely, and target the actual fix.

[Chartman123]

Please set up a real dev environment. Closing this PR.

[xhon-pelushi]

@Chartman123 fair enough — I set one up. Wanted to follow through with actual evidence rather than more back-and-forth.

Ran a real Nextcloud stable34 + Forms instance locally (cloned nextcloud/server, installed via occ against SQLite, built this PR's branch with the real Vite build, not a static mock), created and published a form through the actual Forms API, and loaded the real public submit page at 375px width — the same class of viewport this issue is about.

Measuring the actual <header> element's getBoundingClientRect() on that live page:

• Without this PR's fix (built from main): header width: 375px, margin-inline-start: 34px → right edge lands at 392px against a 375px viewport. 17px of real overflow. It's clipped rather than scrollable, so it won't show up as a page-level horizontal scrollbar — which might be why it didn't read as "overflow" when you checked.
• With this PR's fix: header right edge lands at exactly 375px. 0px overflow.

So the header math in this PR is confirmed correct against a real render, not just isolated CSS. If there's a different wobble you're seeing beyond this (a different element, a different viewport/browser), I'm glad to chase that too — just let me know the width/browser and, if you have a second, whether Chrome/Firefox DevTools' Layout panel flags a different element as the culprit.

Would you be up for reopening this? I don't have permission to do it myself.

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)