Resizing the sidebar shows a visible border line #1108

Open
opened 2026-10-05 06:49:27 +00:00 by kayg · 3 comments
Owner

Owner report (2026-10-05, production)

"The sidebar border is visible while resizing the sidebar?" Screenshot: while dragging the sidebar edge, a visible vertical border line appears at the sidebar edge (and a horizontal line across the top band).

Owner rule (CLAUDE.md, resizable panels): the sidebar and every side panel resize by dragging their edge directly with an invisible hit zone, a col-resize cursor and no visible handle. No border, line or handle may appear during hover, drag or after release. Check every resizable panel (sidebar, Mail list column, inspector, Canvas side panels).

## Owner report (2026-10-05, production) "The sidebar border is visible while resizing the sidebar?" Screenshot: while dragging the sidebar edge, a visible vertical border line appears at the sidebar edge (and a horizontal line across the top band). Owner rule (CLAUDE.md, resizable panels): the sidebar and every side panel resize by dragging their edge directly with an invisible hit zone, a col-resize cursor and **no visible handle**. No border, line or handle may appear during hover, drag or after release. Check every resizable panel (sidebar, Mail list column, inspector, Canvas side panels).
Author
Owner

Owner follow-up (2026-10-05): "that sidebar divider is still present in the UI?" The line is visible AT REST too, not only while resizing: in a 1440 px Notes screenshot a full-height vertical line runs just right of the floating sidebar card (x≈270), and a horizontal hairline runs under the page title band. Remove every border, divider, hairline, shadow edge or resize affordance drawn between the sidebar and the content, at rest, on hover, during drag and after release, in all Tabs and at all widths. The floating sidebar card keeps its own glass edge only. Same for Mail list column, Settings, inspector and Canvas side panels.

Owner follow-up (2026-10-05): "that sidebar divider is still present in the UI?" The line is visible AT REST too, not only while resizing: in a 1440 px Notes screenshot a full-height vertical line runs just right of the floating sidebar card (x≈270), and a horizontal hairline runs under the page title band. Remove every border, divider, hairline, shadow edge or resize affordance drawn between the sidebar and the content, at rest, on hover, during drag and after release, in all Tabs and at all widths. The floating sidebar card keeps its own glass edge only. Same for Mail list column, Settings, inspector and Canvas side panels.
Author
Owner

Root cause found by the orchestrator (2026-10-05): the "fake sidebar" (pill + 5 bars), the sidebar divider line and the header hairline came from #app-boot-skeleton in apps/web/src/app.html. It sat fixed (z-index 1) OUTSIDE %sveltekit.body% and nothing removed it after hydration, so it showed through every collapsed or glass sidebar on every Tab. Hotfix 63818a5e1 removes it (boot paints only the themed background) and the reload-423 e2e now asserts it is absent. Running sidebar3 work (Tags loading row etc.) still applies; rebase on dev before finishing.

Root cause found by the orchestrator (2026-10-05): the "fake sidebar" (pill + 5 bars), the sidebar divider line and the header hairline came from `#app-boot-skeleton` in apps/web/src/app.html. It sat fixed (z-index 1) OUTSIDE %sveltekit.body% and nothing removed it after hydration, so it showed through every collapsed or glass sidebar on every Tab. Hotfix 63818a5e1 removes it (boot paints only the themed background) and the reload-423 e2e now asserts it is absent. Running sidebar3 work (Tags loading row etc.) still applies; rebase on dev before finishing.
Author
Owner

Verified the sidebar boundary described in #1108 with the post-merge production build for #1138. At rest, edge hover, mid-drag and after release, the sidebar edge border is transparent; the header has no bottom border or shadow. The screenshots and CSS assertions are in the #1138 evidence set:

This verifies the sidebar/content boundary and header line described in the report. Other resizable surfaces were not part of this #1138 check. Issue remains open.

Verified the sidebar boundary described in #1108 with the post-merge production build for #1138. At rest, edge hover, mid-drag and after release, the sidebar edge border is transparent; the header has no bottom border or shadow. The screenshots and CSS assertions are in the #1138 evidence set: - [edge hover](https://git.kayg.org/attachments/f5cb2d36-a1a0-4dd8-b5be-197acccb126d) - [mid-drag](https://git.kayg.org/attachments/61841399-28bb-45a2-9b06-0f326b468340) - [after release](https://git.kayg.org/attachments/9a58ee16-216b-43c2-93cd-01147aa40d57) This verifies the sidebar/content boundary and header line described in the report. Other resizable surfaces were not part of this #1138 check. Issue remains open.
Commenting is not possible because the repository is archived.
No labels
No milestone
No project
No assignees
1 participant
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-v0#1108
No description provided.