fix(results): vertical scroll + reliable ⌘A in the raw output pane#2
Merged
Merged
Conversation
Two bugs in the TSV/JSON output pane: - Vertical scroll didn't work (only horizontal). .raw-text-view/.json-view used `flex: 1`, but their parent .res-body is a relatively-positioned block, not a flex container — so flex had no effect and the pane grew to content height with no scroll (the parent just clipped it). Use `height: 100%` + overflow:auto like .res-table-wrap, so both axes scroll. - ⌘A didn't select the pane on macOS. Detection required the pane to be focused (e.target.closest), but macOS WebKit doesn't focus a tabindex <div> on click, so e.target stayed <body>. Re-key off "not editing + a raw pane is on screen" (document.querySelector) instead of focus; a focused editor/input still gets the native select-all (whole query). Verified in-browser against the built bundle: tall pane scrolls vertically; ⌘A fired from <body> selects the entire pane text. 333 tests pass; shortcuts.js + results.js at 100%. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QennTvGKAtJZrv9EpQagef
Root cause of the "16 rows don't scroll, 2000 do" report. `html { zoom: 1.2 }`
combined with `#root { height: 100vh }`: `vh` units ignore `zoom`, so 100vh
(= viewport px) is then scaled ×1.2 and #root renders ~120vh tall. The whole
shell overflowed the window by ~20% (measured: 970px tall in an 808px viewport),
pushing the results pane's lower portion below the fold — and html is
overflow:hidden, so the page can't scroll to reach it. With a tall result the
inner pane's own scrollbar bridged the gap (so 2000 rows "worked"); with a short
result the off-screen rows were simply unreachable.
Use `height: 100%` (cascades html→body→#root, and % scales with zoom) so the
shell is bounded to the viewport. Verified in-browser: #root/main-row/res-body
all bottom-out exactly at the viewport; the 16-row table sits fully on screen
and its pane scrolls. 333 tests pass.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QennTvGKAtJZrv9EpQagef
- Header: rename "Sign out" → "Log Out" and add a GitHub-logo link (new Icon.github, opens the repo in a new tab, rel=noopener). svgFilled gains optional viewBox args so the 24×24 octocat path renders at 15px. - History panel: remove the "Clear history" row (looked out of place); per-row delete is enough. clearHistory() stays as a tested state op, just unused in UI. Verified in-browser: header shows "Log Out" + GitHub icon; history lists rows with per-row delete, no clear row. 334 tests pass; icons/saved-history at 100%. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QennTvGKAtJZrv9EpQagef
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.
Two bugs reported in the data output pane (TSV/JSON raw view), both fixed and verified in-browser against the built bundle.
1. Vertical scroll didn't work (only horizontal)
.raw-text-view/.json-viewusedflex: 1, but their parent.res-bodyis a relatively-positioned block, not a flex container — soflexhad no effect, the pane grew to its content height, and.res-body'soverflow: hiddenjust clipped it. Horizontal worked because width was bounded. Fix:height: 100%+overflow: auto(same as.res-table-wrap), so both axes scroll.2. ⌘A didn't select the pane on macOS
Detection required the pane to be focused (
e.target.closest(...)), but macOS WebKit doesn't focus atabindex<div>on click — soe.targetstays<body>and the handler bailed. Re-keyed off "not editing + a raw pane is on screen" (document.querySelector) rather than focus. A focused editor/input still falls through to the native select-all (whole query), so ⌘A in the SQL editor is unchanged.Verification (real browser, bundled code)
overflow-y: auto,scrollTopset and took → vertical scroll works; horizontal still works.KeyboardEventfrom<body>(pane not focused): selection equals the full pane text (exact match).npm test→ 333 pass;shortcuts.jsandresults.jsat 100% coverage.🤖 Generated with Claude Code
https://claude.ai/code/session_01QennTvGKAtJZrv9EpQagef