feat(mobile): a first pass at fitting Rill web-admin on phones#9678
Open
dfliess wants to merge 9 commits into
Open
feat(mobile): a first pass at fitting Rill web-admin on phones#9678dfliess wants to merge 9 commits into
dfliess wants to merge 9 commits into
Conversation
Playwright project "mobile" (emulated iPhone 13) asserting the audited routes render without horizontal overflow. Inert until the viewport meta serves the real device width.
…orts Mechanical pass: floating and fixed-width elements get min(Npx, calc(100vw - 2rem)) or max-w caps, and the org/admin tables scroll horizontally inside their own container instead of overflowing the page.
The header wraps below sm instead of overflowing, breadcrumb labels truncate, the nav toggle stays reachable, and the app shell switches to dynamic viewport units (dvh) so mobile browser chrome doesn't eat into the layout.
Project tabs scroll horizontally with edge fades and auto-scroll to the selected tab. The header action cluster keeps to a single row (grow works around WebKit sizing a wrapping flex item below its single-line max-content), Share collapses to its icon, and the last-refreshed date collapses to a clock that opens a popover on tap, since hover tooltips never fire on touch. Status tables scroll inside their container and the embedded edit session gates to desktop with a friendly notice.
Below sm the chart column and leaderboards stack vertically, the tab bar flows under the filters instead of overlaying wrapped chips, the three time pickers stack their list and calendar panels with vertical scroll, and the time pill scrolls horizontally so squeezed controls stay reachable. The pivot view, whose table plus config sidebar has no phone layout yet, shows a desktop-only notice below sm.
Canvas rows kept a fixed minimum that forced horizontal overflow on phones; they now shrink with the viewport.
Embed layouts drop their fixed minimum width, the embed header wraps, wide markdown tables scroll inside their own container, and the table toolbar wraps below sm.
The collapsed conversation sidebar becomes a horizontal top rail below 640px, the chat input and context picker stay within the viewport, and the project home wraps its title and actions.
Retires the width=1024 stop-gap from rilldata#2423 now that every Cloud surface fits a real device viewport. maximum-scale=1 suppresses the iOS auto-zoom on sub-16px inputs; user pinch zoom is unaffected since iOS 10.
nishantmonu51
added
Type:Feature
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.
Hey Team!
We have a first approach to mobile responsiveness for Rill User UI and we'd like to contribute it back.
To be clear, this is not a mobile redesign, just making Rill usable from a phone. A step forward to iterate on.
Today
app.htmlpins the viewport towidth=1024(the stop-gap from #2423), so on a phone you get a zoomed-out desktop page. This PR drops that: every Cloud surface fits a real device viewport, wrapping and scrolling instead of overflowing, with a friendly "better on desktop" notice on the two surfaces that really need one or would be really complicated to migrate now (pivot and embedded editing). Also included a Playwright smoke suite to keep it from regressing.Developed in collaboration with Claude Code