Make Panel/Dialog and location picker responsive on mobile - #207
Merged
Conversation
sdunster
marked this pull request as ready for review
September 5, 2026 00:52
Panel/PanelBox/Dialog used the same padding, corner radius, and font sizes at every viewport width, crowding the screens that use them — login (AdminLoginPage), passkey setup (PasskeyEnrollPrompt/ SettingsPasskeys), and kiosk enrollment (SessionEnroll, KioskEnrollment, KioskSetupForm) — on phones, and the kiosk enrollment QR code (a fixed 280px image) could overflow a narrow viewport. LocationPicker (the location selector) doesn't share the Panel/ PanelBox component but uses the same full-screen centred card pattern by hand, with the same problems plus no horizontal padding on the outer container at all. - Panel/PanelBox: smaller padding, corner radius, and title/intro font size below the sm breakpoint; below sm the card also drops its border, shadow, and rounded corners, and both it and the page behind it use the same flat background tone so there's no gradient or colour seam visible anywhere on a small screen. - Dialog: smaller padding below sm, and a tighter max-w-[92vw] so it never touches the viewport edges. - LocationPicker: matched the same mobile treatment — outer padding, scaled card padding/heading size, and the same background handling as PanelBox. - KioskEnrollment: QR code image now shrinks to fit narrow viewports instead of a fixed 280px box. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QBYWif8MmkmRPr7KK2icUh
sdunster
force-pushed
the
claude/panel-dialog-mobile-responsive-seusgc
branch
from
September 5, 2026 00:53
eb937e6 to
1080e71
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The shared
Panel/PanelBox/Dialogcomponents (web/src/components/ui/Panel.tsx,web/src/components/ui/Dialog.tsx) used the same padding, corner radius, and font sizes at every viewport width. On phones this crowded the screens that use them — login (AdminLoginPage), passkey setup (PasskeyEnrollPrompt/SettingsPasskeys), and kiosk enrollment (SessionEnroll,KioskEnrollment,KioskSetupForm) — and the kiosk enrollment QR code (a fixed 280px image) could overflow a narrow viewport.LocationPicker(the location selector) doesn't share thePanel/PanelBoxcomponent but uses the same full-screen centred card pattern by hand, with the same problem plus no horizontal padding on the outer container at all.Panel/PanelBox: smaller padding, corner radius, and title/intro font size below thesmbreakpoint.Dialog: smaller padding belowsm, and a tightermax-w-[92vw]so it never touches the viewport edges.LocationPicker: added outer padding and scaled the card's padding/heading size to match.KioskEnrollment: QR code image now shrinks to fit narrow viewports instead of a fixed 280px box.Test plan
npx prettier --checkon changed filesnpx eslinton changed filesnpx tsc -b(typecheck, clean)🤖 Generated with Claude Code
https://claude.ai/code/session_01QBYWif8MmkmRPr7KK2icUh
Generated by Claude Code