SEARCH: remove heading bands, restore row density, align preview icon/title #288

Closed
opened 2026-09-28 06:12:30 +00:00 by kayg · 16 comments
Owner

Owner feedback (2026-09-28) on the Search palette on calternal.cloud (dev 8778fd00, after #284).

  1. No heading bands. Owner: "no need for those whitebands to highlight headings in search?" The RECENT / NAVIGATE section headings paint a full-width tinted band (light theme: a white band; dark theme: a darker band). Remove the band. A heading is text only, on the palette's own glass. While it is sticky, it still needs to stay readable over rows that scroll under it: use the progressive blur and fade mask the app already uses for sticky headers (the settings header, #246 shared glass layer). Do not add a new opaque fill. Keep the #284 sticky-paint e2e assertion meaningful: update it to assert "no opaque fill, text stays readable" and do not weaken it.
  2. Density went down. Owner: "the density of the search items has gone down… they are more closely together now… vertically? It looked nicer before!" Find the commit that changed the palette row height, row gap or section spacing (bisect the palette between the #258 step A merge, #284 and the earlier state; compare screenshots). Restore the earlier, airier rhythm through the shared list tokens (--sidebar-row-h, --list-row-gap or the palette's own token), not with local padding. Report the regressing commit.
  3. Preview pane icon/text alignment. In the right-hand preview column, the item's icon and title ("⊘ Analytics") are misaligned horizontally and vertically: the icon sits too far from the title and off its cap centre. Use the shared IconLabel owner from #253 (job/icon-align is rebuilding it CSS-only). If #253 has merged when you start, migrate the preview header to it. If not, use the same gap token (--icon-label-gap) and cap-centre rule, and note it on #253.
  4. The results rows and the preview must keep the #286 bottom padding under the floating action pill.

Owner files: apps/web/src/lib/search/* and the palette styles. Evidence: 2× crops of the palette, light and dark, desktop and phone, before and after (including a sticky heading mid-scroll).

Owner feedback (2026-09-28) on the Search palette on calternal.cloud (dev 8778fd00, after #284). 1. **No heading bands.** Owner: "no need for those whitebands to highlight headings in search?" The RECENT / NAVIGATE section headings paint a full-width tinted band (light theme: a white band; dark theme: a darker band). Remove the band. A heading is text only, on the palette's own glass. While it is sticky, it still needs to stay readable over rows that scroll under it: use the progressive blur and fade mask the app already uses for sticky headers (the settings header, #246 shared glass layer). Do not add a new opaque fill. Keep the #284 sticky-paint e2e assertion meaningful: update it to assert "no opaque fill, text stays readable" and do not weaken it. 2. **Density went down.** Owner: "the density of the search items has gone down… they are more closely together now… vertically? It looked nicer before!" Find the commit that changed the palette row height, row gap or section spacing (bisect the palette between the #258 step A merge, #284 and the earlier state; compare screenshots). Restore the earlier, airier rhythm through the shared list tokens (`--sidebar-row-h`, `--list-row-gap` or the palette's own token), not with local padding. Report the regressing commit. 3. **Preview pane icon/text alignment.** In the right-hand preview column, the item's icon and title ("⊘ Analytics") are misaligned horizontally and vertically: the icon sits too far from the title and off its cap centre. Use the shared `IconLabel` owner from #253 (job/icon-align is rebuilding it CSS-only). If #253 has merged when you start, migrate the preview header to it. If not, use the same gap token (`--icon-label-gap`) and cap-centre rule, and note it on #253. 4. The results rows and the preview must keep the #286 bottom padding under the floating action pill. Owner files: `apps/web/src/lib/search/*` and the palette styles. Evidence: 2× crops of the palette, light and dark, desktop and phone, before and after (including a sticky heading mid-scroll).
Author
Owner

Starting search-fix on branch job/search-fix, based on dev at 58818bc361. I have read CLAUDE.md, CONTEXT.md and DESIGN.md §32 and §34; next I am locating the row-spacing regression and implementing the visual fixes.

Starting search-fix on branch job/search-fix, based on dev at 58818bc361bf880bdf0b3e13d04d2eb7b43e8cb2. I have read CLAUDE.md, CONTEXT.md and DESIGN.md §32 and §34; next I am locating the row-spacing regression and implementing the visual fixes.
Author
Owner

Finding: d655e308 (Fix phone hit targets and interaction probes, 2026-09-28) changed SearchResultRow.svelte from min-height: 44px to min-height: var(--row-h). On a fine pointer, --row-h is 28px × the UI scale; title-only rows therefore lose the old 44px minimum. I checked the #258 step A/B and #284 diffs: they do not change this row-height declaration. I will compare production-build captures at the prior and current styles and use a palette-specific/shared row token for the fix.

Finding: `d655e308` (`Fix phone hit targets and interaction probes`, 2026-09-28) changed `SearchResultRow.svelte` from `min-height: 44px` to `min-height: var(--row-h)`. On a fine pointer, `--row-h` is 28px × the UI scale; title-only rows therefore lose the old 44px minimum. I checked the #258 step A/B and #284 diffs: they do not change this row-height declaration. I will compare production-build captures at the prior and current styles and use a palette-specific/shared row token for the fix.
Author
Owner

Owner (2026-09-28): 'the search bar can grow wider when the width allows it. right now it only grows vertically.' Added to this issue:
5. The palette grows wider on wide windows. DESIGN §32 fixes it at 640 px (720 px with the preview pane at ≥960 px windows). New rule: the width scales with the viewport and is capped, e.g. width: clamp(640px, 62vw, 1100px) with the preview pane, and the list keeps a readable max (≈ 560–620 px) while the preview pane takes the extra width (that is where the width helps: longer titles, file previews, note excerpts). Without the preview (<960 px) the current rule stays. Tune the numbers from screenshots at 1280, 1440, 1728 and 2560 px wide. Keep it centred, keep the vertical rules, and keep the phone layout unchanged. Update DESIGN.md §32 to the new rule in the same commit. Put the width in a token, not a literal (the owner rule on overrides, #287/#299).

Owner (2026-09-28): 'the search bar can grow wider when the width allows it. right now it only grows vertically.' Added to this issue: 5. **The palette grows wider on wide windows.** DESIGN §32 fixes it at 640 px (720 px with the preview pane at ≥960 px windows). New rule: the width scales with the viewport and is capped, e.g. `width: clamp(640px, 62vw, 1100px)` with the preview pane, and the list keeps a readable max (≈ 560–620 px) while the **preview pane takes the extra width** (that is where the width helps: longer titles, file previews, note excerpts). Without the preview (<960 px) the current rule stays. Tune the numbers from screenshots at 1280, 1440, 1728 and 2560 px wide. Keep it centred, keep the vertical rules, and keep the phone layout unchanged. Update DESIGN.md §32 to the new rule in the same commit. Put the width in a token, not a literal (the owner rule on overrides, #287/#299).
Author
Owner

Resuming #288 on branch job/search-fix, based on dev at 58818bc361. Committed the pending 2× sticky-heading screenshot capture support as 0159da69 after node --check. I have read the full issue discussion; proceeding with palette styling, markup and DESIGN §32 only. I will leave search data/query code to job/search-perf-c.

Resuming #288 on branch job/search-fix, based on dev at 58818bc361bf880bdf0b3e13d04d2eb7b43e8cb2. Committed the pending 2× sticky-heading screenshot capture support as 0159da69 after `node --check`. I have read the full issue discussion; proceeding with palette styling, markup and DESIGN §32 only. I will leave search data/query code to job/search-perf-c.
Author
Owner

Finding: the pre-change production search E2E passed palette growth/pinned chrome, grouped results, keyboard preview, result actions, parser, expanded search, deep links and saved searches. It then timed out after 15 s at the existing Include subfolders check: #search-results [role="option"] never showed atlas-old-brief.txt after .q-pill .sub-toggle was clicked. The fixture uploaded that file to Design/Archive; the preceding assertion confirmed it was absent with subfolders off. I did not change the expected result or data/query code because that scope belongs to job/search-perf-c. I will rerun the same unchanged check with the final production build and report its outcome.

Finding: the pre-change production search E2E passed palette growth/pinned chrome, grouped results, keyboard preview, result actions, parser, expanded search, deep links and saved searches. It then timed out after 15 s at the existing `Include subfolders` check: `#search-results [role="option"]` never showed `atlas-old-brief.txt` after `.q-pill .sub-toggle` was clicked. The fixture uploaded that file to `Design/Archive`; the preceding assertion confirmed it was absent with subfolders off. I did not change the expected result or data/query code because that scope belongs to job/search-perf-c. I will rerun the same unchanged check with the final production build and report its outcome.
Author
Owner

Implemented and committed the requested style/markup updates through 637405a7 (fix(search): expand palette on wide windows). The palette now uses the §32 adaptive width token on wide windows, keeps results within 620 px, and gives extra width to the preview. Saved preview sizing continues to use the existing per-user resize storage. Updated the search E2E review capture to record layout metrics and the §32 text.

svelte-check passed with 0 errors and 0 warnings; node --check apps/web/e2e/search.mjs and git diff --check passed.

The baseline production E2E run still fails the existing “Include subfolders” expectation: after enabling it, atlas-old-brief.txt under Design/Archive does not appear. The off-state assertion confirms it is absent before toggling. Search query/data code is owned by search-perf-c, so this job leaves the behavior and expectation unchanged. I will repeat that check after the required dev merge.

Implemented and committed the requested style/markup updates through `637405a7` (`fix(search): expand palette on wide windows`). The palette now uses the §32 adaptive width token on wide windows, keeps results within 620 px, and gives extra width to the preview. Saved preview sizing continues to use the existing per-user resize storage. Updated the search E2E review capture to record layout metrics and the §32 text. `svelte-check` passed with 0 errors and 0 warnings; `node --check apps/web/e2e/search.mjs` and `git diff --check` passed. The baseline production E2E run still fails the existing “Include subfolders” expectation: after enabling it, `atlas-old-brief.txt` under `Design/Archive` does not appear. The off-state assertion confirms it is absent before toggling. Search query/data code is owned by search-perf-c, so this job leaves the behavior and expectation unchanged. I will repeat that check after the required `dev` merge.
Author
Owner

The post-merge production E2E stopped at apps/web/e2e/search.mjs:585 with ReferenceError: width is not defined. The 44 px row-height assertion was added in d743a8d5; only its diagnostic template referenced width, which is not in scope at that assertion. I am changing the message to report the fixed 1440 px desktop viewport. The assertion remains resultRowMinimum >= 44.

The post-merge production E2E stopped at `apps/web/e2e/search.mjs:585` with `ReferenceError: width is not defined`. The 44 px row-height assertion was added in `d743a8d5`; only its diagnostic template referenced `width`, which is not in scope at that assertion. I am changing the message to report the fixed 1440 px desktop viewport. The assertion remains `resultRowMinimum >= 44`.
Author
Owner

The production screenshot run captured search-fix-palette-390-paper-white.png, then timed out at apps/web/e2e/search.mjs:345 while applying the desktop sticky-heading crop check to the 390 px phone view. That sticky capture check was added in this job and the owner requested the phone palette crop separately from the four desktop sticky crops. I am limiting the sticky scroll/crop portion to widths >=960 px; the phone no-preview and action checks remain active.

The production screenshot run captured `search-fix-palette-390-paper-white.png`, then timed out at `apps/web/e2e/search.mjs:345` while applying the desktop sticky-heading crop check to the 390 px phone view. That sticky capture check was added in this job and the owner requested the phone palette crop separately from the four desktop sticky crops. I am limiting the sticky scroll/crop portion to widths >=960 px; the phone no-preview and action checks remain active.
Author
Owner

The post-merge production E2E captured and attached all 18 2× review crops: palette and sticky states at 1280/1440/1728/2560 in paper-white and tokyo-night, plus the 390 px phone palette in both themes. The responsive surface/result/preview assertions and the phone no-preview check passed.

The E2E then stopped at the existing grouped-results assertion (apps/web/e2e/search.mjs:643): after three query attempts, the headings list was empty and it reported AssertionError: section Notes in . The subfolder assertion from the earlier production run was not reached in this final run. Search result/data behavior is owned by search-perf-c; this job leaves it unchanged.

The post-merge production E2E captured and attached all 18 2× review crops: palette and sticky states at 1280/1440/1728/2560 in paper-white and tokyo-night, plus the 390 px phone palette in both themes. The responsive surface/result/preview assertions and the phone no-preview check passed. The E2E then stopped at the existing grouped-results assertion (`apps/web/e2e/search.mjs:643`): after three query attempts, the headings list was empty and it reported `AssertionError: section Notes in `. The subfolder assertion from the earlier production run was not reached in this final run. Search result/data behavior is owned by search-perf-c; this job leaves it unchanged.
Author
Owner

Final report — search-fix (#288)

Branch: job/search-fix
Head SHA: 6c2cb1d3ba0b2af5290bf6055ed938992b65cc80
Pushed: git push origin job/search-fix returned Everything up-to-date.

Built

  • Removed opaque sticky search group bands and used the shared progressive blur/fade treatment.
  • Restored the 44 px minimum search row rhythm and aligned the preview icon with the title cap using CSS tokens.
  • Made the wide palette grow at 960 px and above. The results column is capped at 620 px; the preview uses remaining width up to its saved resize width.
  • Updated the responsive crop checks and §32 in docs/DESIGN.md.

Files changed by this job

  • apps/web/src/lib/components/search-dialog.svelte
  • apps/web/src/lib/search/SearchPreview.svelte
  • apps/web/src/lib/search/SearchResultRow.svelte
  • apps/web/src/calternal-app.css
  • packages/ui/src/tokens.css
  • apps/web/e2e/search.mjs
  • docs/DESIGN.md

git merge dev also brought in CONTRIBUTING.md and the two current research documents from dev.

Review crops

All 18 2× PNGs are attached to this issue. Desktop palette and sticky crops cover 1280, 1440, 1728, and 2560 px in both themes. The phone palette crops cover 390 px in both themes.

Width Paper palette Paper sticky Dark palette Dark sticky
1280 px palette sticky palette sticky
1440 px palette sticky palette sticky
1728 px palette sticky palette sticky
2560 px palette sticky palette sticky

Phone: paper-white palette, tokyo-night palette.

Gates

cargo fmt --check: exit 0; no output.

cargo clippy --all-targets -- -D warnings: exit 0. Exact final output:

    Finished `dev` profile [unoptimized + debuginfo] target(s) in 15m 27s

cargo test: exit 0; 72 test result lines, 1355 passed, 0 failed, 12 ignored. Exact final output:

test result: ok. 0 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.00s

bun run check: exit 0. Output:

$ svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/search-fix/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

bun run test: exit 0. Output:

 Test Files  107 passed (107)
      Tests  701 passed (701)
   Start at  11:17:40
   Duration  79.55s (transform 57%, environment 16%, import 16%, tests 8%, setup 3%)

Environment  |component| jsdom was created 28 times · 61.18s total, 25% of tracked time
             create it once per worker with pool: 'vmThreads' (keeps per-file isolation) or isolate: false (shares it across files)
             learn more: https://vitest.dev/guide/improving-performance#test-environments

E2E result and known gaps

The production review run captured and attached all 18 crops. Its responsive palette assertions and phone no-preview check passed. The run then stopped at the grouped-results check after three query attempts returned no group headings:

AssertionError [ERR_ASSERTION]: section Notes in 
    at /home/kayg/Developer/calternal-wt/search-fix/apps/web/e2e/search.mjs:643:77

An earlier production run on this branch also showed the existing “Include subfolders” assertion did not return atlas-old-brief.txt from Design/Archive. The final run stopped earlier, so that behavior was not reconfirmed after the merge. Search query/data behavior belongs to job/search-perf-c; neither behavior nor its existing expectation was changed here.

Decisions

  • Kept the existing 960 px preview breakpoint and used the §32 automatic width token, capped by viewport margins.
  • The design text did not set manual preview bounds. Kept the existing resizer minimum at 240 px and capped it at 480 px; a saved width fits inside the automatic palette cap.
  • IconLabel from #253 was not present on the merged dev base, so this branch uses CSS cap-centering tokens. I recorded that fallback on #253.

No screenshots or build artifacts are committed.

# Final report — search-fix (#288) Branch: `job/search-fix` Head SHA: `6c2cb1d3ba0b2af5290bf6055ed938992b65cc80` Pushed: `git push origin job/search-fix` returned `Everything up-to-date`. ## Built - Removed opaque sticky search group bands and used the shared progressive blur/fade treatment. - Restored the 44 px minimum search row rhythm and aligned the preview icon with the title cap using CSS tokens. - Made the wide palette grow at 960 px and above. The results column is capped at 620 px; the preview uses remaining width up to its saved resize width. - Updated the responsive crop checks and §32 in `docs/DESIGN.md`. ## Files changed by this job - `apps/web/src/lib/components/search-dialog.svelte` - `apps/web/src/lib/search/SearchPreview.svelte` - `apps/web/src/lib/search/SearchResultRow.svelte` - `apps/web/src/calternal-app.css` - `packages/ui/src/tokens.css` - `apps/web/e2e/search.mjs` - `docs/DESIGN.md` `git merge dev` also brought in `CONTRIBUTING.md` and the two current research documents from `dev`. ## Review crops All 18 2× PNGs are attached to this issue. Desktop palette and sticky crops cover 1280, 1440, 1728, and 2560 px in both themes. The phone palette crops cover 390 px in both themes. | Width | Paper palette | Paper sticky | Dark palette | Dark sticky | | --- | --- | --- | --- | --- | | 1280 px | [palette](https://git.kayg.org/attachments/6b3af802-26ab-451d-8aec-cc355c8f0371) | [sticky](https://git.kayg.org/attachments/b146a44d-9532-4636-8643-2ec40cc48dcc) | [palette](https://git.kayg.org/attachments/ec5baac2-2bb0-42ea-9650-f9395969ee1b) | [sticky](https://git.kayg.org/attachments/1e4dfbeb-5963-4b5e-a3ea-baad2a7e2ca1) | | 1440 px | [palette](https://git.kayg.org/attachments/316da460-05ba-48d7-b1a0-9a4c0c94abbf) | [sticky](https://git.kayg.org/attachments/b2faadf8-f1b1-416a-b2ca-4745533350ea) | [palette](https://git.kayg.org/attachments/f61be545-88e6-4918-9377-17e2516e3c80) | [sticky](https://git.kayg.org/attachments/53e1e6a0-f750-4cb1-a6ff-0a1fb8393f13) | | 1728 px | [palette](https://git.kayg.org/attachments/1efeeb0b-6bbd-4b74-8909-04382b41ad96) | [sticky](https://git.kayg.org/attachments/c1596efb-46ab-41f8-b494-26e65d05d5c7) | [palette](https://git.kayg.org/attachments/a928887c-8d2c-4f15-80ad-a7fbc6296b32) | [sticky](https://git.kayg.org/attachments/54f06c50-9a1b-4656-9b84-1bf25edb7a61) | | 2560 px | [palette](https://git.kayg.org/attachments/64facef0-a6e7-4e4f-bba5-19ed940af624) | [sticky](https://git.kayg.org/attachments/39eed2ff-8c6b-4708-ab73-e831dad9c1c2) | [palette](https://git.kayg.org/attachments/06b50e7b-58f1-4984-98c2-a95447522183) | [sticky](https://git.kayg.org/attachments/2c8d4a0f-530a-45db-96c1-46e4ba2bb2a2) | Phone: [paper-white palette](https://git.kayg.org/attachments/b7ec3c20-035a-4a64-ac58-15056f93018e), [tokyo-night palette](https://git.kayg.org/attachments/e984fc15-9fdf-4756-8352-0723e40c71d9). ## Gates `cargo fmt --check`: exit 0; no output. `cargo clippy --all-targets -- -D warnings`: exit 0. Exact final output: ```text Finished `dev` profile [unoptimized + debuginfo] target(s) in 15m 27s ``` `cargo test`: exit 0; 72 test result lines, 1355 passed, 0 failed, 12 ignored. Exact final output: ```text test result: ok. 0 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.00s ``` `bun run check`: exit 0. Output: ```text $ svelte-kit sync && svelte-check --tsconfig ./tsconfig.json Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/search-fix/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` `bun run test`: exit 0. Output: ```text Test Files 107 passed (107) Tests 701 passed (701) Start at 11:17:40 Duration 79.55s (transform 57%, environment 16%, import 16%, tests 8%, setup 3%) Environment |component| jsdom was created 28 times · 61.18s total, 25% of tracked time create it once per worker with pool: 'vmThreads' (keeps per-file isolation) or isolate: false (shares it across files) learn more: https://vitest.dev/guide/improving-performance#test-environments ``` ## E2E result and known gaps The production review run captured and attached all 18 crops. Its responsive palette assertions and phone no-preview check passed. The run then stopped at the grouped-results check after three query attempts returned no group headings: ```text AssertionError [ERR_ASSERTION]: section Notes in at /home/kayg/Developer/calternal-wt/search-fix/apps/web/e2e/search.mjs:643:77 ``` An earlier production run on this branch also showed the existing “Include subfolders” assertion did not return `atlas-old-brief.txt` from `Design/Archive`. The final run stopped earlier, so that behavior was not reconfirmed after the merge. Search query/data behavior belongs to `job/search-perf-c`; neither behavior nor its existing expectation was changed here. ## Decisions - Kept the existing 960 px preview breakpoint and used the §32 automatic width token, capped by viewport margins. - The design text did not set manual preview bounds. Kept the existing resizer minimum at 240 px and capped it at 480 px; a saved width fits inside the automatic palette cap. - `IconLabel` from #253 was not present on the merged `dev` base, so this branch uses CSS cap-centering tokens. I recorded that fallback on #253. No screenshots or build artifacts are committed.
Author
Owner

Correction to the final report’s merge note: git merge dev also brought apps/web/src/lib/composer/Composer.svelte into the branch, alongside CONTRIBUTING.md and the two research documents. The seven files listed under “Files changed by this job” are the search-fix diff relative to dev.

Correction to the final report’s merge note: `git merge dev` also brought `apps/web/src/lib/composer/Composer.svelte` into the branch, alongside `CONTRIBUTING.md` and the two research documents. The seven files listed under “Files changed by this job” are the search-fix diff relative to `dev`.
Author
Owner

Orchestrator review of 6c2cb1d3: not accepted yet. Good: the palette widens with the preview taking the extra width, the preview icon aligns with the title, and rows keep 44 px. Still wrong: the bands. Every section's rows still sit on their own tinted block, alternating darker/lighter per section (clearly visible in the tokyo-night phone crop and in the paper 1728 crop: NOTES / LOG ENTRIES / DAYS / PHOTOS groups each have a distinct background). The owner asked for no bands at all. Required: no background on section groups or headings. Rows sit directly on the palette glass; only the hovered/selected row gets its capsule. While a heading is stuck at the top, its readability comes from the progressive blur/fade over the rows scrolling under it, and only while stuck. Re-attach the same crop set, including a mid-scroll sticky state, and check that the #284 sticky-paint assertion still asserts readability without an opaque fill.

Orchestrator review of 6c2cb1d3: **not accepted yet.** Good: the palette widens with the preview taking the extra width, the preview icon aligns with the title, and rows keep 44 px. **Still wrong: the bands.** Every section's rows still sit on their own tinted block, alternating darker/lighter per section (clearly visible in the tokyo-night phone crop and in the paper 1728 crop: NOTES / LOG ENTRIES / DAYS / PHOTOS groups each have a distinct background). The owner asked for no bands at all. Required: no background on section groups or headings. Rows sit directly on the palette glass; only the hovered/selected row gets its capsule. While a heading is stuck at the top, its readability comes from the progressive blur/fade over the rows scrolling under it, and only while stuck. Re-attach the same crop set, including a mid-scroll sticky state, and check that the #284 sticky-paint assertion still asserts readability without an opaque fill.
Author
Owner

Resuming the #288 review fixes on job/search-fix. Current head: 6c2cb1d3ba0b2af5290bf6055ed938992b65cc80; the branch's common base with dev is c99fc31dd9e0f542a02956a787010bbf1250384c (dev currently points to ebc5d5f10ba475d4df75077471c1694eb0dee8c3). I read the latest orchestrator review. I am tracing and removing the per-section row tint, limiting the shared progressive blur/fade to the stuck heading state, strengthening the paint assertion, and recapturing the crop set.

Resuming the #288 review fixes on `job/search-fix`. Current head: `6c2cb1d3ba0b2af5290bf6055ed938992b65cc80`; the branch's common base with `dev` is `c99fc31dd9e0f542a02956a787010bbf1250384c` (`dev` currently points to `ebc5d5f10ba475d4df75077471c1694eb0dee8c3`). I read the latest orchestrator review. I am tracing and removing the per-section row tint, limiting the shared progressive blur/fade to the stuck heading state, strengthening the paint assertion, and recapturing the crop set.
Author
Owner

Finding: both search layers can tint a whole result section. ProgressiveBlur defaults to visible and each group heading's wash extends below its heading, so the wash paints rows before the heading sticks. On phones, .row.card also paints --glass-chrome-bg and a border on every result. I am hiding the wash until its heading is stuck and keeping the touch row size and spacing while clearing the idle row fill.

Finding: both search layers can tint a whole result section. `ProgressiveBlur` defaults to visible and each group heading's wash extends below its heading, so the wash paints rows before the heading sticks. On phones, `.row.card` also paints `--glass-chrome-bg` and a border on every result. I am hiding the wash until its heading is stuck and keeping the touch row size and spacing while clearing the idle row fill.
Author
Owner

Finding: the new production paint assertion stopped at 1440 px in paper-white before the remaining crops. It recorded one aria-selected Search row with a transparent background (rgba(0, 0, 0, 0)) while another row had a fill (rgb(231, 235, 250)). I am checking the active-class, hover and result-kind state to keep the selected row's capsule and allow only the intended hovered capsule.

Finding: the new production paint assertion stopped at 1440 px in paper-white before the remaining crops. It recorded one `aria-selected` Search row with a transparent background (`rgba(0, 0, 0, 0)`) while another row had a fill (`rgb(231, 235, 250)`). I am checking the active-class, hover and result-kind state to keep the selected row's capsule and allow only the intended hovered capsule.
Author
Owner

Search fix complete

Branch: job/search-fix
HEAD: fb5ba4a771f8bf6c41a497caf99be8a19f9d7a48
Merged dev once in 8a868d3de1631b1be3c233a4bb85aaf55d20b269. git push origin job/search-fix returned Everything up-to-date.

Changes

  • Removed section and heading bands. Headings and idle result rows now sit on the palette glass. Only a hovered or selected result paints a capsule. Phone cards keep their touch size and spacing without an idle fill or border.
  • Kept the progressive heading blur hidden at rest. It fades in only while the sticky heading is stuck. Reduced-motion users do not get the fade transition.
  • Kept the wide palette, 44px desktop result rhythm, and aligned preview layout from this issue branch.
  • Added production E2E paint checks. The check waits for the capsule transition to finish before it samples the selected and idle rows.

Commits: 04a8f180 fix(search): keep result groups on clear glass; fb5ba4a7 test(search): wait for active capsule transition.

Files

  • apps/web/src/lib/components/search-dialog.svelte
  • apps/web/src/lib/search/SearchResultRow.svelte
  • apps/web/src/lib/search/SearchPreview.svelte
  • apps/web/src/calternal-app.css
  • apps/web/e2e/search.mjs
  • packages/ui/src/tokens.css
  • docs/DESIGN.md

Gates

Verbatim success output:

  • cargo fmt --check: exit 0; stdout and stderr were empty.

  • cargo clippy --all-targets -- -D warnings:

        Finished `dev` profile [unoptimized + debuginfo] target(s) in 14m 18s
    
  • cargo test:

        Finished `test` profile [unoptimized + debuginfo] target(s) in 10m 16s
    

    All 72 test-result summaries passed: 1,365 passed, 0 failed, 12 ignored.

  • bun run check:
    svelte-check found 0 errors and 0 warnings

  • bun run test:

     Test Files  110 passed (110)
          Tests  709 passed (709)
       Start at  13:16:40
       Duration  95.15s (transform 55%, environment 18%, import 14%, tests 9%, setup 4%)
    
  • bun run build completed successfully before the production E2E run.

Review crops

All 18 crops come from the production build at 2× scale.

State Width Theme Crop
palette 1280px light PNG
palette 1280px dark PNG
palette 1440px light PNG
palette 1440px dark PNG
palette 1728px light PNG
palette 1728px dark PNG
palette 2560px light PNG
palette 2560px dark PNG
palette 390px light PNG
palette 390px dark PNG
sticky 1280px light PNG
sticky 1280px dark PNG
sticky 1440px light PNG
sticky 1440px dark PNG
sticky 1728px light PNG
sticky 1728px dark PNG
sticky 2560px light PNG
sticky 2560px dark PNG

Known gaps

  • The production E2E run passed the new paint checks and captured all crops, then stopped at the existing grouped-results assertion: AssertionError [ERR_ASSERTION]: section Notes in . The expected search section was absent. I did not change that expectation.
  • The one post-merge adversarial round did not finish its watcher-overflow setup. It wrote 15,000/20,000 entries, then reported timed out waiting for restart-ready-4 after 1800 polls at 0.1s each. This is load-only under the job rule; the round produced no completed endpoint results.
  • Vitest passed all tests but JSDOM logged Could not parse CSS stylesheet and repeated Not implemented: Window's scrollTo() method messages. The production Chromium E2E exercised the sticky-state query.

Decisions

docs/DESIGN.md does not set a mechanism for detecting a stuck heading. I used the CSS @container ... scroll-state(stuck: top) query. It avoids a JavaScript scroll listener. In a browser that does not support scroll-state queries, the decorative blur stays hidden and the heading remains readable. The production E2E exercised this in Chromium.

## Search fix complete Branch: `job/search-fix` HEAD: `fb5ba4a771f8bf6c41a497caf99be8a19f9d7a48` Merged `dev` once in `8a868d3de1631b1be3c233a4bb85aaf55d20b269`. `git push origin job/search-fix` returned `Everything up-to-date`. ### Changes - Removed section and heading bands. Headings and idle result rows now sit on the palette glass. Only a hovered or selected result paints a capsule. Phone cards keep their touch size and spacing without an idle fill or border. - Kept the progressive heading blur hidden at rest. It fades in only while the sticky heading is stuck. Reduced-motion users do not get the fade transition. - Kept the wide palette, 44px desktop result rhythm, and aligned preview layout from this issue branch. - Added production E2E paint checks. The check waits for the capsule transition to finish before it samples the selected and idle rows. Commits: `04a8f180 fix(search): keep result groups on clear glass`; `fb5ba4a7 test(search): wait for active capsule transition`. ### Files - `apps/web/src/lib/components/search-dialog.svelte` - `apps/web/src/lib/search/SearchResultRow.svelte` - `apps/web/src/lib/search/SearchPreview.svelte` - `apps/web/src/calternal-app.css` - `apps/web/e2e/search.mjs` - `packages/ui/src/tokens.css` - `docs/DESIGN.md` ### Gates Verbatim success output: - `cargo fmt --check`: exit 0; stdout and stderr were empty. - `cargo clippy --all-targets -- -D warnings`: ```text Finished `dev` profile [unoptimized + debuginfo] target(s) in 14m 18s ``` - `cargo test`: ```text Finished `test` profile [unoptimized + debuginfo] target(s) in 10m 16s ``` All 72 test-result summaries passed: 1,365 passed, 0 failed, 12 ignored. - `bun run check`: `svelte-check found 0 errors and 0 warnings` - `bun run test`: ``` Test Files 110 passed (110) Tests 709 passed (709) Start at 13:16:40 Duration 95.15s (transform 55%, environment 18%, import 14%, tests 9%, setup 4%) ``` - `bun run build` completed successfully before the production E2E run. ### Review crops All 18 crops come from the production build at 2× scale. | State | Width | Theme | Crop | |---|---:|---|---| | palette | 1280px | light | [PNG](https://git.kayg.org/attachments/aba1174a-e8d0-49b9-a869-abeb1f55d3b0) | | palette | 1280px | dark | [PNG](https://git.kayg.org/attachments/6a82243b-0540-46c8-b2f3-a885840bebb9) | | palette | 1440px | light | [PNG](https://git.kayg.org/attachments/777dae61-5871-445d-b81e-ac05e508cabd) | | palette | 1440px | dark | [PNG](https://git.kayg.org/attachments/6c856706-2811-4540-8a59-f4bf109dd66b) | | palette | 1728px | light | [PNG](https://git.kayg.org/attachments/b8e21e49-278e-4808-8b3e-2f59a88c8129) | | palette | 1728px | dark | [PNG](https://git.kayg.org/attachments/b2019469-bb2c-4410-a6c3-4f4c337c6b64) | | palette | 2560px | light | [PNG](https://git.kayg.org/attachments/639ea49f-9e76-448a-8556-fde0aad5939e) | | palette | 2560px | dark | [PNG](https://git.kayg.org/attachments/5801182a-e91d-444c-9edb-2b5b1d7c0142) | | palette | 390px | light | [PNG](https://git.kayg.org/attachments/d3e241ee-fa95-4d2c-aa2f-a2f2be896935) | | palette | 390px | dark | [PNG](https://git.kayg.org/attachments/5387ad77-ab68-43f8-a85a-653aacc71f33) | | sticky | 1280px | light | [PNG](https://git.kayg.org/attachments/5804c829-c5b7-4024-98b3-c28954d6a69a) | | sticky | 1280px | dark | [PNG](https://git.kayg.org/attachments/431579f9-452d-4c21-a3ef-379834c7703a) | | sticky | 1440px | light | [PNG](https://git.kayg.org/attachments/ff19a7cb-0abd-473f-bae2-c1bd36643cc8) | | sticky | 1440px | dark | [PNG](https://git.kayg.org/attachments/7daf4e5e-eebe-4acb-b9f4-5badb1d64722) | | sticky | 1728px | light | [PNG](https://git.kayg.org/attachments/1ff201e1-d486-48db-bcec-17a05b4556e4) | | sticky | 1728px | dark | [PNG](https://git.kayg.org/attachments/843990f8-a5c1-407b-a2b3-f4d5f3e8921c) | | sticky | 2560px | light | [PNG](https://git.kayg.org/attachments/fa61587d-5900-4b75-8464-be061d8d93f1) | | sticky | 2560px | dark | [PNG](https://git.kayg.org/attachments/5f5545fe-bb8f-485c-b108-4928f2680c3b) | ### Known gaps - The production E2E run passed the new paint checks and captured all crops, then stopped at the existing grouped-results assertion: `AssertionError [ERR_ASSERTION]: section Notes in `. The expected search section was absent. I did not change that expectation. - The one post-merge adversarial round did not finish its watcher-overflow setup. It wrote 15,000/20,000 entries, then reported `timed out waiting for restart-ready-4 after 1800 polls at 0.1s each`. This is load-only under the job rule; the round produced no completed endpoint results. - Vitest passed all tests but JSDOM logged `Could not parse CSS stylesheet` and repeated `Not implemented: Window's scrollTo() method` messages. The production Chromium E2E exercised the sticky-state query. ### Decisions `docs/DESIGN.md` does not set a mechanism for detecting a stuck heading. I used the CSS `@container ... scroll-state(stuck: top)` query. It avoids a JavaScript scroll listener. In a browser that does not support scroll-state queries, the decorative blur stays hidden and the heading remains readable. The production E2E exercised this in Chromium.
kayg closed this issue 2026-09-28 11:31:34 +00:00
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal#288
No description provided.