Make the web UI responsive on mobile#69
Open
dynaum wants to merge 4 commits into
Open
Conversation
Drives a real browser at phone/laptop widths against a throwaway server instance. Mobile tests fail today (horizontal overflow; rules panel and channel sidebar squeeze the chat). Desktop tests characterize current side-by-side behavior so the fix cannot regress it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Adds a single additive @media (max-width: 768px) block to style.css. Desktop layout (>768px) is untouched. - Header/channel-bar no longer overflow: button cluster shrinks and scrolls horizontally instead of widening the document. - Rules and jobs panels overlay the chat as full-height drawers instead of taking an inline column that squeezed the timeline. - Channel sidebar overlays the chat from the left instead of pushing it. The jobs-panel override is scoped under #content-area so it out-specifies the base rule in jobs.css (which loads after style.css). All panel/sidebar toggles keep working unchanged; only their mobile rendering changes. Adds browser-based responsive tests (phone + laptop widths) covering the rules panel, jobs panel, channel sidebar, and horizontal-overflow cases. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
On a 375px phone the sender label + session/mic/send/schedule controls crowded the textarea down to ~100px wide. On mobile the input row now wraps and the textarea takes its own full-width line above the controls, with a 44px min-height and a 16px font (smaller fonts make iOS zoom on focus). All controls stay present, on the line below. Desktop layout is unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
After the input wraps to its own line, the controls were left-packed and the send group ended ~57px short of the row's right edge. margin-left:auto on the mic button pushes the audio + send buttons to the right; the sender label and session button stay on the left. Desktop unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
1 participant
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.
Make the web UI usable on mobile
The web UI was desktop-first. A viewport meta tag was present, but there were no width-based
@mediaqueries, so on a phone the three-column layout (channel sidebar + timeline + rules/jobs panel) crowded the chat and the page scrolled sideways.This PR adds a single additive
@media (max-width: 768px)block tostatic/style.css. Desktop layout (> 768px) is byte-for-byte unchanged. No backend or JS changes.What changes on mobile (≤ 768px)
All panel/sidebar toggles work exactly as before; only their rendering at mobile widths changes.
Implementation note
The jobs-panel overlay rule is scoped under
#content-areaso it out-specifies the base#jobs-panelrule, which lives injobs.cssand loads afterstyle.css(equal specificity would otherwise lose on source order).Tests
Adds a browser-based suite (
tests/test_responsive.py, Playwright) that launches a throwaway server and drives a real headless Chromium at phone (375px) and laptop (1280px) widths, asserting on rendered geometry: horizontal overflow, rules panel, jobs panel, channel sidebar, input size, and send/mic alignment. Desktop tests characterize the existing side-by-side behavior so the change cannot regress it.Full suite: 51 passing.
Related
Overlaps in spirit with #61 (a lighter spacing/label polish pass). This PR is complementary: it restructures the panel/sidebar layout and adds the test suite, and could absorb #61's bubble/spacing tweaks if preferred.
🤖 Generated with Claude Code
Screenshots
Desktop (> 768px) — unchanged
Mobile (375px)