Forms in view mode do not scale well on small screen resolutions

[bobbadshy]

Please use the 👍 reaction to show that you are affected by the same issue. Please don't comment if you have no relevant information to add!

Describe the bug
Forms in view mode unnecessarily use more then 100% screen width on small horizontal resolutions.

To Reproduce
Steps to reproduce the behavior:

1. Create a test form with entry fields
2. Open in view mode on smartphone or in Chrome with DevTools and low horizontal screen resolution chosen in device mode
3. Header and form element take up more than available screen width due to extra margins not being included in width calculation.

Expected behavior
Forms in view mode should be displayed without horizontal scrolling even on low horizontal screen resolutions like those on smartphones.

Screenshots
Takes up more than available screen width:

With a Custom CSS workaround applied to force down the element width to 90% and remove margin:

System info:
2024-05-04.md

Nextcloud (please complete the following information):

• Nextcloud-Version: 29.0.0.19
• Forms-Version: 4.2.3

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Browser log

Open your console, reload your page and/or do the action leading to this issue and copy/paste the log in this thread.

How to access your browser console (Click to expand)

Chrome

• Press either CTRL + SHIFT + J to open the “console” tab of the Developer Tools.
• Alternative method:
  1. Press either CTRL + SHIFT + I or F12 to open the Developer Tools.
  2. Click the “console” tab.

Safari

• Press CMD + ALT + I to open the Web Inspector.
• See Chrome’s step 2. (Chrome and Safari have pretty much identical dev tools.)

IE9

1. Press F12 to open the developer tools.
2. Click the “console” tab.

Firefox

• Press CTRL + SHIFT + K to open the Web console (COMMAND + SHIFT + K on Macs).
• or, if Firebug is installed (recommended):
  1. Press F12 to open Firebug.
  2. Click on the “console” tab.

Opera

1. Press CTRL + SHIFT + I to open Dragonfly.
2. Click on the “console” tab.

Additional context
Add any other context about the problem here.

[tmlmt]

I posted a similar but different issue in #2145: I can't edit forms on my mobile device.

This issue made me realize when I switch the device to landscape mode, things work (for issue 2145), but not in portrait mode.

There seems to be generally speaking quite some responsiveness issues on mobile devices? (editing, filling out, viewing, ...)