Right sidebar rail hover line matches left clip #149

New issue

Closed

opened 2026-05-30 17:27:58 +00:00 by steve · 0 comments

steve commented

2026-05-30 17:27:58 +00:00

Owner

The right sidebar rail hover/focus accent line appears thicker than the left because the left outer sidebar container clips overflow while the right does not.

Problem

Left Sidebar.Root applies overflow-hidden, clipping the rail ::after line to the inner half of the edge. Right sidebar lacks that clip, so the full 4px hover line is visible and looks heavier.

Goal

Match left/right rail visual weight by clipping the right sidebar container the same way.

Scope

Add overflow-hidden to the right sidebar root container in sidebar-right.svelte.
Document the shared clip behavior in the workspace package spec.

Non-goals

Changing rail width tokens or hover styles in @lapis-notes/ui.
Left collapsed titlebar rail offset work.

Acceptance Criteria

Right sidebar root container uses overflow-hidden like the left outer sidebar.
Left and right rail hover lines appear the same visual thickness at the pane edge.
Workspace package checks pass.

Implementation Notes

Apply overflow-hidden on Sidebar.Root in sidebar-right.svelte (class lands on [data-slot="sidebar-container"]).

Suggested Files or Specs To Inspect

packages/workspace/src/lib/components/sidebar/sidebar-right.svelte
packages/workspace/src/lib/components/sidebar/sidebar-left.svelte
spec/src/20-packages/workspace/index.md

Validation Commands

pnpm --filter @lapis-notes/workspace check:all

#143 (PWA sidebar boundary/rail alignment)

Follow-up Tasks

Implementation Summary

Added overflow-hidden to right Sidebar.Root so the rail ::after hover line clips to the pane edge like the left sidebar. Updated workspace package spec.

The right sidebar rail hover/focus accent line appears thicker than the left because the left outer sidebar container clips overflow while the right does not. ## Problem Left `Sidebar.Root` applies `overflow-hidden`, clipping the rail `::after` line to the inner half of the edge. Right sidebar lacks that clip, so the full 4px hover line is visible and looks heavier. ## Goal Match left/right rail visual weight by clipping the right sidebar container the same way. ## Scope - Add `overflow-hidden` to the right sidebar root container in `sidebar-right.svelte`. - Document the shared clip behavior in the workspace package spec. ## Non-goals - Changing rail width tokens or hover styles in `@lapis-notes/ui`. - Left collapsed titlebar rail offset work. ## Acceptance Criteria - Right sidebar root container uses `overflow-hidden` like the left outer sidebar. - Left and right rail hover lines appear the same visual thickness at the pane edge. - Workspace package checks pass. ## Implementation Notes Apply `overflow-hidden` on `Sidebar.Root` in `sidebar-right.svelte` (class lands on `[data-slot="sidebar-container"]`). ## Suggested Files or Specs To Inspect - `packages/workspace/src/lib/components/sidebar/sidebar-right.svelte` - `packages/workspace/src/lib/components/sidebar/sidebar-left.svelte` - `spec/src/20-packages/workspace/index.md` ## Validation Commands - `pnpm --filter @lapis-notes/workspace check:all` ## Related Issues - #143 (PWA sidebar boundary/rail alignment) ## Follow-up Tasks ## Implementation Summary Added overflow-hidden to right Sidebar.Root so the rail ::after hover line clips to the pane edge like the left sidebar. Updated workspace package spec.

steve

2026-05-30 17:27:58 +00:00