fix(#589): prevent background scroll and browser zooming in full-screen map

[latin-panda]

Closes #589

I have verified this PR works in these browsers (latest versions):

• Chrome
• Firefox
• Safari (macOS)
• Safari (iOS)
• Chrome for Android
• Not applicable

What else has been done to verify that this works as intended?

Manual testing in desktop and mobile devices

Why is this the best possible solution? Were any other approaches considered?

How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?

• The feedback button won't appear on top of modals or in full screen, preventing it from blocking clickable areas.

Do we need any specific form for testing your changes? If so, please attach one.

What's changed

• Full screen CSS now prevents accidental scrolling of the background page and page zooming so the user is not stuck in full screen.
• Updated z-index for the feedback button.

[changeset-bot]

🦋 Changeset detected

Latest commit: b5bcb15

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@getodk/web-forms	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[latin-panda]

@garethbowen This is a targeted PR to address background scrolling and zooming issues in full-screen mode. There will be more adjustments to improve the experience, but I wanted to resolve these issues first. I’ve verified the fix on Android, desktop, and iPhone emulators, and Szymon will follow up with a test on a physical iPhone.

[garethbowen]

Looks good to me. No blockers but I found some niggles during testing on Android Firefox and Chrome.

1. On Mobile Firefox specifically, it's still difficult to scroll past the map when not full screen - the margins are tiny! One fix would be to reduce the maximum height of the map to ~90% of the viewport so you can always grab above or below.

2. The full screen most in landscape on Chrome is a bit ugly...

Notice the big white padding on the left. This doesn't show in Firefox so not sure where it's coming from. This is different from the issue that Szymon found.

3. Also in full screen mode we still have rounded corners on the map which is only a few pixels but looks wrong. Change the border radius to 0 so it goes right to the corners of the screen.

[garethbowen]

The dynamic nature of this gave me pause because I was worried it might cause too much re-rendering but I couldn't get it to behave poorly either in Chrome or Firefox. Even if it does trigger it feels smooth.