feat(#617): improve map full-screen UX on mobile by latin-panda · Pull Request #640 · getodk/web-forms

latin-panda · 2026-01-30T18:56:31Z

Closes #617

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

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

Desktop: full screen maps

full-screen-desktop.mp4

Mobile: full screen maps

mobile-full-screen-min.mp4

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

Clicking anywhere on the map, including buttons like zoom and find current location, should trigger full screen. A transparent overlay captures clicks and initiates full-screen mode. This approach avoids complicating current map interactions and keeps the full-screen feature contained in the view layer (Vue component).

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?

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

Use forms from demo > geo location

What's changed

Inline-map is reduced in height for mobile
Hide all the buttons on the map except the full-screen button when it's on mobile
The full-screen button's icon is replaced by the expand and collapse icons for desktop and mobile
The Location denied error is shown in full-screen mode and it has a close button.
For geopoint with "maps" appearance - the overlay is shown, if point is removed, it display a close "X" button

changeset-bot · 2026-01-30T18:56:35Z

🦋 Changeset detected

Latest commit: a2f7135

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	Minor

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 · 2026-02-03T14:39:59Z

@garethbowen When you have a chance, could you please review?

garethbowen

Much nicer to scroll around, thanks!

Some thoughts

Testing on Firefox Android

When I click the "Get location" button in inline mode it goes full screen but doesn't start getting location and I have to click the button again. It should either do both, OR we should remove that button in inline mode.
I don't think we need the close button as well as the resize smaller button because they do the same thing, right? It's nice to have the minimise button in the same corner as the maximise button because that's intuitive. So I'd suggest removing the close button, and elevating the minimise button z-index so it's above the backdrop.

Nice to have... When you switch to inline mode it feels like the view should zoom and pan to center on all selected points so you can review before submission.
Nice to have... It's slightly unexpected to me that clicking the map would full screen it. After it happens a couple of times it's ok, but I wonder if a fast css animation on full screen would help. So instead of jumping from inline to full, it expands/shrinks over 100ms so you can see where it's come from?

Testing on Firefox desktop

Something weird happens with the get location now... In inline mode when I hit get location it finds where I am, zooms in, and then zooms way back out to the full world view again. It only happens on the first load - if I remove the point and do it again it works as expected. Video:

Screencast.From.2026-02-04.09-07-28.mp4

garethbowen · 2026-02-03T19:50:10Z

packages/web-forms/src/components/common/map/MapBlock.vue

 const confirmDeleteAction = ref(false);
 const isUpdateCoordsDialogOpen = ref(false);
 const selectedVertex = ref<Coordinate | undefined>();
+const hideErrorFullScreen = ref(false);


The double negative makes this harder to read... can we reset the whole thing to showErrorFullScreen defaulting to true?

garethbowen · 2026-02-03T19:55:09Z

packages/web-forms/src/components/common/map/MapBlock.vue

+	.map-overlay.full-screen-overlay {
+		display: none;
+		// Cover get-location-overlay
+		z-index: calc(var(--odk-z-index-overlay) + 10);


Create a new variable for this so all the z-indexes are listed in the same place, and the next one can decide whether it's above or below this one without having to look through the code for calculations.

garethbowen · 2026-02-03T19:55:29Z

packages/web-forms/src/components/common/map/MapBlock.vue

+			width: 38px;
+			height: 38px;


This number shows up in a couple of other places. Let's pull out a variable for it to keep them consistent.

alyblenkin · 2026-02-04T05:30:37Z

Jumping in here quickly to add a few comments!

Testing on Firefox Android

When I click the "Get location" button in inline mode it goes full screen but doesn't start getting location and I have to click the button again. It should either do both, OR we should remove that button in inline mode.

Good catch! It should do both - get the location and go full screen once clicked.

I don't think we need the close button as well as the resize smaller button because they do the same thing, right? It's nice to have the minimise button in the same corner as the maximise button because that's intuitive. So I'd suggest removing the close button, and elevating the minimise button z-index so it's above the backdrop.

They do have the same action, but I thought the X was more intuitive in this state. Happy with either option.

Nice to have... When you switch to inline mode it feels like the view should zoom and pan to center on all selected points so you can review before submission.

There are a few zoom issues we want to address later, so maybe we leave this one. But just so I understand your flow, add a shape, leave the full screen map, and then go back to review?

Nice to have... It's slightly unexpected to me that clicking the map would full screen it. After it happens a couple of times it's ok, but I wonder if a fast css animation on full screen would help. So instead of jumping from inline to full, it expands/shrinks over 100ms so you can see where it's come from?

I had a few other user flows that made it a bit more obvious, but this was the most light weight and the goal was to get something into users hands quickly. But I agree, it would be so nice to have an animation to help with the transition. Happy to defer to you @latin-panda. Not sure how quick this is.

garethbowen · 2026-02-04T19:29:11Z

But just so I understand your flow, add a shape, leave the full screen map, and then go back to review?

Yes. Also happens with trace, and single point if you select a point and then scroll away before minimising.

alyblenkin · 2026-02-04T22:25:37Z

Thanks for clarifying, @garethbowen. So maybe something like this:

Given the user has captured a point, line, or trace in full-screen mode on mobile,
When the user exits full-screen mode to return to the form/review screen,
Then the map view should center to fit the entire feature,
so that they can feel confident they completed the task correctly.

@latin-panda I think we should eventually do this at one point. Do you think it's worth splitting it out?

new full screen ux for mobile

b7fd1c4

latin-panda added 3 commits January 31, 2026 01:57

changeset

839f4c6

show error in map when full screen

1d8f989

rename css class

9265468

latin-panda marked this pull request as ready for review February 3, 2026 14:18

fixes margin

a2f7135

latin-panda requested a review from garethbowen February 3, 2026 14:39

garethbowen requested changes Feb 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(#617): improve map full-screen UX on mobile#640

feat(#617): improve map full-screen UX on mobile#640
latin-panda wants to merge 5 commits intomainfrom
mobile-full-screen-ux

latin-panda commented Jan 30, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Jan 30, 2026 •

edited

Loading

Uh oh!

latin-panda commented Feb 3, 2026

Uh oh!

garethbowen left a comment

Uh oh!

garethbowen Feb 3, 2026

Uh oh!

garethbowen Feb 3, 2026

Uh oh!

garethbowen Feb 3, 2026

Uh oh!

alyblenkin commented Feb 4, 2026

Testing on Firefox Android

Uh oh!

garethbowen commented Feb 4, 2026

Uh oh!

alyblenkin commented Feb 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

latin-panda commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

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

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?

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

What's changed

Uh oh!

changeset-bot bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

latin-panda commented Feb 3, 2026

Uh oh!

garethbowen left a comment

Choose a reason for hiding this comment

Testing on Firefox Android

Testing on Firefox desktop

Uh oh!

garethbowen Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

garethbowen Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

garethbowen Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

alyblenkin commented Feb 4, 2026

Testing on Firefox Android

Uh oh!

garethbowen commented Feb 4, 2026

Uh oh!

alyblenkin commented Feb 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

latin-panda commented Jan 30, 2026 •

edited

Loading

changeset-bot bot commented Jan 30, 2026 •

edited

Loading