fix(ui): Preloads overflow clipping and CodeBreak button placement#98
Open
Aejkatappaja wants to merge 1 commit intoQwikDev:mainfrom
Open
fix(ui): Preloads overflow clipping and CodeBreak button placement#98Aejkatappaja wants to merge 1 commit intoQwikDev:mainfrom
Aejkatappaja wants to merge 1 commit intoQwikDev:mainfrom
Conversation
- Preloads panel: outer overflow-hidden clipped stat cards and prevented scroll when content exceeded the panel height. Switched to overflow-auto with min-h-full on the column stack so content scrolls on narrow or short panels. - CodeBreak StateParser: content container was missing the `flex` class, so the textarea pushed the Parse State button outside the card into the next grid row, overlapping the Parsed State header. Moved the button into the card header next to the title.
🦋 Changeset detectedLatest commit: ff98038 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
commit: |
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.
Summary
Two UI polish fixes spotted while testing the browser extension and the in-app overlay on the Preloads and Code Break panels.
Preloads — outer container clipped content
The Preloads panel root used
overflow-hiddenon anh-fullflex container. When the stat-cards grid and filter header took up most of the available vertical space (common in narrower devtools panels), the table below was pushed out of view with no way to scroll. Horizontally, the stat cards were also clipped on narrower widths because of the same outeroverflow-hidden.Switched the outer container to
overflow-autoand replacedh-full min-h-0on the column stack withmin-h-fullso the content can grow past the viewport and scroll naturally. The inner table keeps its own horizontal scroll wrapper for themin-w-[1080px]table, so the sticky header behaviour is preserved.Diff:
packages/ui/src/features/Preloads/Preloads.tsxCodeBreak (StateParser) — Parse State button overlapped the next card
The content container inside the Input State card had the classes
min-h-0 flex-1 flex-col space-y-3 p-3— note the missingflex. Withoutflex,flex-colis a no-op and the textarea'sh-fullexpanded to the full card height, pushing theParse Statebutton outside the card. On the mobile-stacked layout (single column), that button then landed directly on top of theParsed Statecard's header, making it visually overlap and hard to click.Rather than reintroducing the missing
flexand hoping the stack stays balanced at all widths, moved theParse Statebutton into the Input State card header alongside the title. More robust across panel widths, easier to reach, and consistent with the rest of the UI where per-card actions live in the header.Diff:
packages/ui/src/features/CodeBreak/StateParser.tsxTesting
pnpm --filter playground dev, then openhttp://localhost:5174/): both panels render correctly at narrow and wide widths; Preloads scrolls, Parse State button visible and clickable in the header.pnpm --filter @devtools/ui build && pnpm --filter @devtools/browser-extension build, reload inchrome://extensions): Preloads panel no longer clips; Code Break tab button lives in the header, no overlap with the Parsed State card.Notes
@devtools/uiships a pre-builtlib/, so extension rebuilds need the UI build step first (pnpm --filter @devtools/ui build) — unrelated to this PR but worth flagging for future extension work.