Fix responsive layout issues on narrow screens - #8
Closed
RyanMakesAndBreaksStuff wants to merge 5 commits into
Closed
Fix responsive layout issues on narrow screens#8RyanMakesAndBreaksStuff wants to merge 5 commits into
RyanMakesAndBreaksStuff wants to merge 5 commits into
Conversation
- Stop reordering .eb-center-col ahead of the Toolbox on stacked (<=900px) layouts, so the Toolbox is the first thing users see instead of being pushed below the fold. - Add white-space: nowrap and overflow-x: auto to the toolbox tab strip so tab labels no longer wrap and overlap the pane content below them. - Extend the group toolbar's wrap-instead-of-clip behavior from the <=700px breakpoint up to <=1100px, so the +Rule/+Group buttons no longer get clipped by the group card's overflow:hidden in the 900-1100px range.
RyanMakesAndBreaksStuff
deleted the
claude/ui-feedback-responsive-svo86t
branch
August 30, 2026 13:54
RyanMakesAndBreaksStuff
restored the
claude/ui-feedback-responsive-svo86t
branch
August 30, 2026 13:55
RyanMakesAndBreaksStuff
marked this pull request as draft
August 30, 2026 13:55
Follow-up to the #7 layout fixes, addressing three gaps found in review. - Move the group toolbar's flex-wrap from the <=1100px breakpoint to the base rule. Wrapping depends on the toolbar's own width, not the viewport's: the dock widths are inline styles that collapse independently, and the docks only narrow at <=1100px, so the center column is actually *narrower* just above that breakpoint (413px at a 1101px viewport) than at the widest width the old rule covered (488px at 1100px). The + Rule / + Group buttons were still clipped by .eb-group-card's overflow: hidden across roughly 1101-1176px. The caption reorder stays gated, since that is a stacked-layout nicety rather than a clipping fix. - Hide the tab strip's horizontal scrollbar. The strip is only as tall as its 34px tabs with no bottom padding, so the 8px scrollbar added by overflow-x: auto detached the active tab's border-bottom from the pane it is meant to join. - Add regression tests for all three of the narrow-screen fixes: the Toolbox staying first in the stacked layout, the tab strip scrolling without breaking the tab join, and the group toolbar wrapping at every width. Each was verified to fail without its fix. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jw48xEwyA9pCD59WJJMPXU
RyanMakesAndBreaksStuff
marked this pull request as ready for review
August 30, 2026 14:47
RyanMakesAndBreaksStuff
marked this pull request as draft
August 30, 2026 14:47
Addresses the second half of the #7 report ("as the screen gets smaller you lose elements entirely"), which the layout pass left untouched: it fixed elements pushed off horizontally, not elements pushed out of the canvas's fixed height. Below 900px the chain was .eb-workspace (overflow-y: auto) wrapping .eb-center-col, pinned to min(70vh, 560px), wrapping .eb-canvas-card, wrapping two more scroll containers (.eb-pane-body, then .eb-group-children). On a short window the builder was pinned to a sliver of the viewport with its rules hidden behind inner scrollbars, which reads as losing them. The column and canvas now size to their content so .eb-workspace's own overflow-y is the single scroll. The viewport-share floor is dropped rather than tuned: it only existed because .eb-canvas-card was flex: 1 1 auto with min-height: 0, contributing nothing to the grid's auto row and collapsing it, so flex: 0 0 auto removes the reason for the floor instead of working around it. Desktop keeps per-container scrolling untouched, and the dock panes keep their own internal scroll so a long field list still does not stretch the page. Covered by a regression test asserting the workspace owns the only stacked scroll, the canvas contributes a real intrinsic height, the inner scrollers stand down, the floor stays gone, and desktop scroll ownership is unchanged. Verified to fail without the fix. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jw48xEwyA9pCD59WJJMPXU
The height half of issue #7 was fixed only behind @media (max-width: 900px), but height is not a narrow-screen concern. PPTB loads the tool in an iframe srcdoc (apps/pptb/vite.config.ts), and that iframe is routinely wide but short — so on desktop the width breakpoints never fire and the canvas still collapsed. .eb-canvas-card is the only flexible item in .eb-center-col (the preview card is flex: 0 0 auto and content-sized), so it absorbed the entire vertical shortfall and became a sliver with its rules hidden behind the .eb-pane-body -> .eb-group-children scroll chain. Give the workspace's single grid row a floor and let the workspace scroll past it instead. With ample height 1fr still wins and the computed layout is unchanged; no new breakpoint. Also close two gaps in the existing tests, which read only the first rule matching a selector: a duplicate override placed outside the media query, and the base .eb-center-col { overflow: hidden } that the desktop scroll chain depends on. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jw48xEwyA9pCD59WJJMPXU
CodeQL and Analyze were the only checks, so a green PR meant "CodeQL found nothing" — none of the layout-contract regression tests guarding the responsive work actually executed. Run the same three commands the README documents for local verification. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jw48xEwyA9pCD59WJJMPXU
Owner
Author
|
Closing as superseded — the work landed on Nothing is lost: this branch's head (b462836) and Both branches are being deleted. To recover either one: Generated by Claude Code |
RyanMakesAndBreaksStuff
deleted the
claude/ui-feedback-responsive-svo86t
branch
August 30, 2026 18:12
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
Three CSS-only fixes in
packages/builder-ui/src/theme/tokens.css, applying identically to both thewebandpptbbuilds (they share this stylesheet via@ryanmakes/eb_builder-ui):.eb-center-colhadorder: -1, visually pushing the condition canvas above the Toolbox even though the Toolbox is first in DOM order. Removed theorderoverride so the Toolbox now appears first, matching the reporter's expectation that it read as the top-level container. (Confirmed with the reporter's preferred "Toolbox first" ordering.)+Rule/+Groupbuttons in.eb-group-toolbaronly wrapped onto a new line at ≤700px; in the 900–1100px range they overflowed and were clipped by the group card'soverflow: hidden, i.e. "you lose elements entirely." Extended the existing wrap behavior up to the ≤1100px breakpoint (matching the breakpoint that narrows the side docks) and removed the now-redundant duplicate rule at ≤700px..eb-tab-strip buttonhad nowhite-space: nowrap, so "Dynamic Content" could wrap to two lines and visually overlap the pane content beneath it in the 900–1100px range. Addedwhite-space: nowrapplusoverflow-x: autoon the strip as a safety net.Verification
npm run typecheck,npm run build:web,npm run test(251/251 passing),npm run lint— all clean.No component/TSX changes — CSS only.
Generated by Claude Code