Finish remaining PWA WCO border alignment and e2e-vault regression coverage #143

New issue

Closed

opened 2026-05-30 07:28:34 +00:00 by steve · 0 comments

steve commented

2026-05-30 07:28:34 +00:00

Owner

Follow-up issue for the remaining PWA Window Controls Overlay chrome regressions that were still being investigated at the end of the current session.

Problem

The previous WCO pass fixed the large regressions around safe-area painting, the unified divider, and sidebar icon visibility, but there are still visual mismatches reported from the live app screenshots:

A horizontal border still shows underneath the first top tab in the middle when the title bar is collapsed.
The separator to the right of the first sidebar does not match the width of the corresponding border in the title/header zone.
The right sidebar hover separator looks wider than the left one, and the header/body seam does not line up cleanly.
The bottom border under the expanded title bar is visible on the vault-load page but missing on the main workspace page.
The current session also left a partial regression test in progress under packages/workspace/e2e/pwa-title-bar.spec.ts: the new collapsed sidebar boundary line matches the resize-handle width probe fails because collapsing both sidebars removes the live handle being used as the comparison baseline.

The user also asked for verification against the real e2e-vault content rather than only the current minimal workspace shell fixture.

Goal

Close the remaining WCO chrome gaps so the top tab notch, sidebar separators, and expanded-titlebar divider all render consistently, then add regression coverage that exercises the real e2e-vault app surface.

Scope

Confirm whether the stray line under the first top tab comes from the outer top-tab header bar, one of its border utility classes, or another chrome surface that the active-tab notch cannot clip.
Fix the left and right sidebar separator widths so the header-zone seam and the body-zone seam use the same visual thickness and color.
Check hover behavior on both side resize handles and make the two sides symmetric.
Diagnose why the expanded title-bar bottom border appears on the vault-load page but not on the main workspace shell, then make the main app match the intended treatment.
Replace or redesign the in-progress failing Playwright probe so it validates the real separator behavior instead of reading a handle that no longer exists after collapse.
Add or adapt coverage so the visual verification can run against e2e-vault content, not only the minimal fixture.

Non-goals

Reworking unrelated Electron title-bar behavior outside the shared workspace chrome.
Broad redesign of the workspace tabs or sidebar styling.
Reopening the already-closed WCO icon-visibility issue unless new root cause evidence shows that issue should be amended instead.

Acceptance Criteria

No visible horizontal line leaks under the active first top tab when the title bar is collapsed.
The separator to the right of the first sidebar matches the title/header seam above it.
Left and right sidebar hover separators render with the same width and alignment.
The expanded title-bar bottom border is visible on the main workspace page, not only on the vault-load page.
Regression coverage for the remaining chrome seams passes.
At least one verification path exercises the real e2e-vault dataset or layout instead of only the minimal shell fixture.

Implementation Notes

Current in-progress files when work paused:
- packages/workspace/src/lib/styles/workspace-shell.css
- packages/workspace/e2e/pwa-title-bar.spec.ts
A focused debug run during the session showed that a border-bottom was still matching the top outer tab header bar in some states, so the next pass should re-check both the CSS selectors and any Tailwind border-b utility classes on the header fragments.
The failing new Playwright probe should likely capture the open-state handle width before collapse, or compare collapsed pseudo-element widths against an explicit expected value, instead of trying to query a removed handle after collapsing both sidebars.
If the real issue turns out to be Electron-only rather than PWA-only, split the follow-up into a dedicated desktop runtime issue instead of broadening this one indefinitely.

Suggested Files or Specs To Inspect

packages/workspace/src/lib/styles/workspace-shell.css
packages/workspace/src/lib/components/tabs/tabs-top.svelte
packages/workspace/src/lib/components/tabs/tabs-stacked.svelte
packages/workspace/src/lib/components/tabs/tabs-sidebar.svelte
packages/workspace/e2e/pwa-title-bar.spec.ts
packages/workspace/src/lib/components/app/VaultBootstrap.svelte
e2e-vault/INDEX.md
spec/src/20-packages/workspace/index.md

Validation Commands

pnpm --filter @lapis-notes/workspace exec playwright test e2e/pwa-title-bar.spec.ts --reporter=list
pnpm --filter @lapis-notes/workspace check:all
pnpm --filter @lapis-notes/workspace test:e2e:smoke
make spec-lint
cd spec && mdbook build

Follow-up Tasks

Decide whether pwa-title-bar.spec.ts should gain an e2e-vault-backed arrangement helper or whether this belongs in a separate smoke-style spec.
If the expanded title-bar divider difference is caused by vault-load using different chrome markup, document that contract in the workspace spec.
If the top-tab stray line is caused by utility classes in Svelte markup rather than shell CSS, add a targeted regression that samples the live outer bar in the affected state.

Implementation Summary

Fixed PWA WCO chrome seams: exclude top-tab outer bar from visible-titlebar border-bottom, align collapsed sidebar boundary pseudo-elements to 2px pane-border token, add rail/collapsed boundary and demo-workspace (e2e-vault) Playwright regressions, and extract shared openDemoWorkspace helper. Validated with pwa-title-bar.spec.ts (17/17), workspace smoke, and spec-lint.

Follow-up issue for the remaining PWA Window Controls Overlay chrome regressions that were still being investigated at the end of the current session. ## Problem The previous WCO pass fixed the large regressions around safe-area painting, the unified divider, and sidebar icon visibility, but there are still visual mismatches reported from the live app screenshots: - A horizontal border still shows underneath the first top tab in the middle when the title bar is collapsed. - The separator to the right of the first sidebar does not match the width of the corresponding border in the title/header zone. - The right sidebar hover separator looks wider than the left one, and the header/body seam does not line up cleanly. - The bottom border under the expanded title bar is visible on the vault-load page but missing on the main workspace page. - The current session also left a partial regression test in progress under `packages/workspace/e2e/pwa-title-bar.spec.ts`: the new `collapsed sidebar boundary line matches the resize-handle width` probe fails because collapsing both sidebars removes the live handle being used as the comparison baseline. The user also asked for verification against the real `e2e-vault` content rather than only the current minimal workspace shell fixture. ## Goal Close the remaining WCO chrome gaps so the top tab notch, sidebar separators, and expanded-titlebar divider all render consistently, then add regression coverage that exercises the real `e2e-vault` app surface. ## Scope - Confirm whether the stray line under the first top tab comes from the outer top-tab header bar, one of its border utility classes, or another chrome surface that the active-tab notch cannot clip. - Fix the left and right sidebar separator widths so the header-zone seam and the body-zone seam use the same visual thickness and color. - Check hover behavior on both side resize handles and make the two sides symmetric. - Diagnose why the expanded title-bar bottom border appears on the vault-load page but not on the main workspace shell, then make the main app match the intended treatment. - Replace or redesign the in-progress failing Playwright probe so it validates the real separator behavior instead of reading a handle that no longer exists after collapse. - Add or adapt coverage so the visual verification can run against `e2e-vault` content, not only the minimal fixture. ## Non-goals - Reworking unrelated Electron title-bar behavior outside the shared workspace chrome. - Broad redesign of the workspace tabs or sidebar styling. - Reopening the already-closed WCO icon-visibility issue unless new root cause evidence shows that issue should be amended instead. ## Acceptance Criteria - [ ] No visible horizontal line leaks under the active first top tab when the title bar is collapsed. - [ ] The separator to the right of the first sidebar matches the title/header seam above it. - [ ] Left and right sidebar hover separators render with the same width and alignment. - [ ] The expanded title-bar bottom border is visible on the main workspace page, not only on the vault-load page. - [ ] Regression coverage for the remaining chrome seams passes. - [ ] At least one verification path exercises the real `e2e-vault` dataset or layout instead of only the minimal shell fixture. ## Implementation Notes - Current in-progress files when work paused: - `packages/workspace/src/lib/styles/workspace-shell.css` - `packages/workspace/e2e/pwa-title-bar.spec.ts` - A focused debug run during the session showed that a `border-bottom` was still matching the top outer tab header bar in some states, so the next pass should re-check both the CSS selectors and any Tailwind `border-b` utility classes on the header fragments. - The failing new Playwright probe should likely capture the open-state handle width before collapse, or compare collapsed pseudo-element widths against an explicit expected value, instead of trying to query a removed handle after collapsing both sidebars. - If the real issue turns out to be Electron-only rather than PWA-only, split the follow-up into a dedicated desktop runtime issue instead of broadening this one indefinitely. ## Suggested Files or Specs To Inspect - `packages/workspace/src/lib/styles/workspace-shell.css` - `packages/workspace/src/lib/components/tabs/tabs-top.svelte` - `packages/workspace/src/lib/components/tabs/tabs-stacked.svelte` - `packages/workspace/src/lib/components/tabs/tabs-sidebar.svelte` - `packages/workspace/e2e/pwa-title-bar.spec.ts` - `packages/workspace/src/lib/components/app/VaultBootstrap.svelte` - `e2e-vault/INDEX.md` - `spec/src/20-packages/workspace/index.md` ## Validation Commands ```bash pnpm --filter @lapis-notes/workspace exec playwright test e2e/pwa-title-bar.spec.ts --reporter=list pnpm --filter @lapis-notes/workspace check:all pnpm --filter @lapis-notes/workspace test:e2e:smoke make spec-lint cd spec && mdbook build ``` ## Follow-up Tasks - Decide whether `pwa-title-bar.spec.ts` should gain an `e2e-vault`-backed arrangement helper or whether this belongs in a separate smoke-style spec. - If the expanded title-bar divider difference is caused by vault-load using different chrome markup, document that contract in the workspace spec. - If the top-tab stray line is caused by utility classes in Svelte markup rather than shell CSS, add a targeted regression that samples the live outer bar in the affected state. ## Implementation Summary Fixed PWA WCO chrome seams: exclude top-tab outer bar from visible-titlebar border-bottom, align collapsed sidebar boundary pseudo-elements to 2px pane-border token, add rail/collapsed boundary and demo-workspace (e2e-vault) Playwright regressions, and extract shared openDemoWorkspace helper. Validated with pwa-title-bar.spec.ts (17/17), workspace smoke, and spec-lint.

steve

2026-05-30 07:28:34 +00:00