Repository navigation
fix(web): panels and pop-ups keep clear of the iPhone Duo's side dock - #913
Merged
Merged
Conversation
The iPhone Duo keeps a strip down the right edge of the screen for its status dock (clock, battery, signal), folded or open, and reports it as env(safe-area-inset-right) for the whole height. The title row and the composer already kept out of it; everything else that touches that edge did not, so the right panel's close button, the file browser's close button and the first controls of several pages sat under the dock. - index.css maps the side insets into --safe-area-left/right, with page-gutters and window-gutters utilities for surfaces that scroll or paint to the window's edge. sideStrips.ts reports the widths in px to script through a ResizeObserver probe (no resize listener, no forced layout). - The right panel's sheet carries its fill into the strip and pads the panel out of it, keeping the panel's own width. - Dialogs, alert dialogs, the command palette, the theme trial bar, the image viewer and toasts stay off the strip; a phone's bottom sheets pad their content out of it. Dialog centering counts the page's edges from the strips. - Menus, popovers, selects, comboboxes, autocompletes, preview cards and anchored toasts add the strips to their collision padding. - Page bodies (Settings, General chats, Fleet, Scheduled, Pull requests, Usage), setup, pairing and reconnect screens, the find bars and the terminal's button row keep off the strip. The conversation stays full width. Two bugs found on the folded screen while testing fold and unfold: - The whole app renders inside the command palette's dialog, and Base UI leaves the backdrop out of a drawer nested in another dialog. The page never dimmed behind the phone's thread list or the right panel's sheet, and a press beside the sheet did not close it. The drawer's backdrop is now forced; the right panel asks for one only in the phone layout, so a narrow desktop window keeps its floating panel. - The phone's thread list stayed open in state while the layout was the desktop one, so unfolding and folding again put it back over the chat. It is put away when the layout stops being the phone's.
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
The side-strip rules put the startup closure 111 B over its gzip budget in CI. The one-off arbitrary classes become a few named utilities: dialog, alert dialog, command palette and image viewer viewports and the terminal's button row use window-gutters, and a phone's bottom sheet and its footer use sheet-strips and sheet-footer-strips. Toasts keep clear of the right strip only, the one position the app uses.
This branch was previously deployed
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
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.
The problem
The iPhone Duo keeps a strip down the right edge of the screen for its status dock (clock, battery, signal), folded or open. The title row and the message box already kept out of it. The right panel, the file browser, dialogs, menus and the top of several pages did not, so their close buttons and top controls sat under the dock.
Testing fold and unfold turned up two more bugs on the folded screen:
The fix
One rule: a surface that touches the window's side carries its fill into the strip and keeps its controls out of it, and a layer fixed to the window stays off it.
index.cssmaps the side insets into--safe-area-left/right, withpage-guttersandwindow-guttersutilities.sideStrips.tsreports the widths in px to script through a ResizeObserver probe.With no strip (every other screen) the changed surfaces measure what they did before.
Checked
vp fmt,vp lint,vp run typecheckNot checked