Add relative z-10 to ResizeHandle so it stacks above adjacent panel
content that was capturing pointer events due to DOM order.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The ResizeHandle div was not stretching to the full height of its flex
row parent, making it only interactive in the top portion. Adding
self-stretch (align-self: stretch) ensures it fills the complete cross-axis
height of the container, so the user can drag at any vertical position.
Fixes: Properties panel resize handle active area.
- font-mono-label: font-weight 500, remove letter-spacing
- NoteList: move timestamp below snippet in note items
- Sidebar: add border-r with sidebar-border color
- ResizeHandle: overlap sidebar border with -ml-1 (no visible gap)
- Sidebar items: text-muted-foreground for inactive group items
- NoteList: uniform 14px vertical padding across all note items
- NoteList header: fixed height 45px to match tab bar
Add requestAnimationFrame throttling to ResizeHandle so mouse move
events are batched per frame instead of triggering setState on every
pixel. Wrap Sidebar in React.memo so it skips re-rendering when only
the parent wrapper div width changes.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Install Tailwind CSS v4 + shadcn/ui with Radix UI primitives. Migrate all
UI components (Sidebar, NoteList, Editor tabs, Inspector, dialogs, palette)
from BEM CSS to Tailwind utility classes and shadcn components (Button,
Input, Dialog, Badge, etc.). Map theme system to shadcn CSS variables while
preserving BlockNote editor styles untouched. Remove 8 old CSS files.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
