fix(playground): Stabilize mode switching and tighten label UX#132
Merged
Conversation
Removing srcdoc on every reset forced an extra about:blank navigation that could race with the next render. Also force a parent layout flush before rewriting srcdoc so the in-iframe pan/zoom initial fit reads a real viewport size instead of the 0x0 fallback.
Severity badges (breaking/caution/warning/info) and other label-style elements were inheriting the default text selection, so double-click and drag would highlight chrome instead of moving past it. Apply user-select: none to buttons, mode tabs, badges, pills, and section labels — content surfaces (headings, hints, finding bodies, output, code) still allow selection.
The diff (added/modified/removed) and join-table badges were dropped into the metrics grid, so they sat awkwardly above the Columns / Relations cards. Move them next to the table title where they describe — paired with the row name they apply to. Mark the badge container non-selectable so the labels don't snag on text selection.
mhiro2
force-pushed
the
fix/playground-misc-issues
branch
from
May 2, 2026 20:10
402cba1 to
b3488e2
Compare
Code Metrics Report
Details | | main (1215079) | #132 (b793dd5) | +/- |
|---------------------|----------------|----------------|-------|
+ | Coverage | 94.8% | 94.8% | +0.0% |
| Files | 81 | 81 | 0 |
| Lines | 39175 | 39201 | +26 |
+ | Covered | 37160 | 37186 | +26 |
+ | Test Execution Time | 1m30s | 1m25s | -5s |Code coverage of files in pull request scope (100.0% → 100.0%)
Reported by octocov |
Schema reviewTip ✅ No risk findings — schema changes look safe to merge. |
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
user-select: noneconsistently to playground UI chrome (buttons, mode tabs, severity badges, pills, section labels) so double-click and drag no longer highlight chrome textChanges
previewFrame.srcdocinresetOutputPanels()so mode switches no longer queue a redundant about:blank navigation that could race with the next render/compare writevoid previewPanel.offsetHeight) right after unhiding the preview panel inrunRenderMode()and the visual branch ofrunCompareMode()so the in-iframepan_zoom.jsinitial fit reads a real viewport size instead of falling back to the 0x0 ghost dimensionsuser-select: nonein one consolidated rule covering buttons, mode tabs, severity badges, pills, topbar labels, surface labels, and stat card labels so chrome text no longer highlights on drag or double-clickdetail-title-rowwith a siblingdetail-title-badgesslot and route the diff and Join Table badges through it so the status sits next to the table name instead of crammed above the metrics cards.detail-badgerules (grid-column: 1 / -1,width: fit-content) and addmin-width: 0; overflow-wrap: anywhereto.detail-titleso long names plus multiple badges wrap cleanly within the draweruser-select: noneso the iframe-side labels behave like the rest of the chrome