fix(search): stabilize search modal height to stop jitter (#54) - #61
Conversation
The search modal was sized purely by its content and centered in the viewport, so every keypress that changed the number of results resized the panel and re-centered it — producing a "super jittery" experience. Give the results list a fixed height (min(60vh, 420px)) so the panel stays the same size and position regardless of how many results match: short result sets keep a stable minimum height and long ones scroll inside the defined height instead of growing the modal. A subtle fade-in smooths the transition when results first appear. Fixes #54 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DaPMmpPcYsu1VXEB3FZBJh
|
🤖 Starting work on this now. |
|
🤖 Watch live or take over the session here: https://claude.ai/code/session_01GN7ANwuCs5KANkSgf9rCjG |
![k5s-bot[bot]](https://avatars.githubusercontent.com/in/1052865?s=60&v=4){kind=small}
There was a problem hiding this comment.
Correct diagnosis and a minimal, well-scoped fix. Giving .results-container a fixed height: min(60vh, 420px) removes the content-driven resize/re-center that produced the per-keypress jitter in #54, and the change is genuinely isolated to this component — the full-page /search route (src/routes/search/+page.svelte) uses a separate .results-area class, so it's unaffected, and the pre-typing empty state still uses .search-hint and stays compact. The flex interaction with the panel's max-height: 70vh is fine (results-container can still shrink via default flex-shrink on very short viewports). CI is green. Approving — one non-blocking note inline about the lack of a regression guard.
|
Review posted successfully. SummaryI reviewed PR #61 ("fix(search): stabilize search modal height to stop jitter") on Verdict: Approve — no code changes made or pushed (review only). What the PR does: A 10-line, CSS-only change to Assessment:
I considered but deliberately skipped flagging the missing ✅ Opened pull request: imaustink/glyph#61 |
|
🤖 Starting work on this now. |
|
🤖 Watch live or take over the session here: https://claude.ai/code/session_01LWwpdWQ6ovTfq4m7f7f9dG |
Asserts the search panel's top (y) and height stay identical across many-results, one-result, and no-results states, so a future revert of the fixed results-container height back to a content-driven size would fail CI.
Triage follow-upPicked this PR back up under ai-triage. Here's what I changed and why. Addressed feedback
Branch sync
PR description
Deliberately not done
CI was still running the checks on the merge/test commit when I wrapped up — the pre-existing checks were all green on the prior head, and everything I could verify locally passes. |
|
Done. PR #61 is ready to merge — all review feedback addressed, branch synced, and 0 unresolved threads. SummaryPR: #61 (state: OPEN, MERGEABLE, head The PR already had two approvals (k5s-bot + imaustink) and all checks green. The only outstanding feedback was one non-blocking inline review comment asking for an automated regression guard. Here's what I did:
Deliberately not done: I left the 140… ✅ Opened pull request: imaustink/glyph#61 |
3 participants
Summary
Fixes #54 — "Search is super jittery".
The search (⌘K) modal was sized entirely by its content and centered in the viewport. Because the results list grows and shrinks with the number of matches, every keypress that changed the result count resized the panel and re-centered it vertically, producing the jittery experience described in the issue.
Fix
Give the results list a fixed height (
min(60vh, 420px)) instead of letting it flex to content:The production change is limited to CSS in
src/lib/components/search/SearchModal.svelte; behavior and markup are unchanged. The empty (pre-typing) state stays compact as before. A Playwright regression test ine2e/search.spec.tslocks the fix in (see Verification).Before / After
Before, the panel's top edge and height jumped on each keypress as the result count changed (e.g. top at ~y122 for many results vs ~y325 for one). After, all states — many results, one result, and no results — occupy the exact same box, with long lists scrolling internally.
Verification
e2e/search.spec.ts→ "search modal keeps a stable size and position across result counts (Search is super jittery #54)"): it opens the ⌘K modal and asserts.search-panel's top (y) andheightare identical within 1px across many-results, one-result, and no-results queries — so reverting the fixed.results-containerheight back to a content-driven size fails CI. Passes locally (8/8 search specs,localproject); CI exercises it in bothlocalandapi.pnpm check(svelte-check): 0 errors, 0 warnings, after syncing the branch withmain.Maintainers: apply the ai-review label to this PR to request an automated code review, or the ai-triage label to have review feedback addressed and the branch brought back in sync with its base. (The automation cannot apply either label to its own PR, so a human needs to add it.)