fix(drag-handle): restore visibility CSS cascade and pointer-events

_bmad-output/implementation-artifacts/spec-fix-drag-handle-visibility.md

@@ -0,0 +1,36 @@
+---
+title: 'fix-drag-handle-visibility'
+type: 'bugfix'
+created: '2026-05-25'
+status: 'done'
+route: 'one-shot'
+---
+
+## Intent
+
+**Problem:** TipTap DragHandle component uses `visibility: hidden/visible` to show/hide, but the CSS `.drag-handle` wrapper had `opacity: 0` which worked independently. However, the inner `.notion-drag-handle` class was styled as a standalone block without being visible when its parent `.drag-handle` was hidden. The CSS cascade meant the inner element had no intrinsic visibility logic — it only appeared to work when the parent opacity changed.
+
+**Approach:** Restructure the CSS so `.drag-handle` (the TipTap-managed wrapper) handles all visibility via `opacity` and `pointer-events`, and `.notion-drag-handle` (the inner content wrapper) styles only the visual appearance of the drag handle icon. The parent-child relationship is now explicit in CSS with `pointer-events: none` on the hidden state.
+
+## Code Map
+
+- `memento-note/app/globals.css:1087-1135` -- DragHandle CSS: fix visibility cascade, add inner wrapper styles
+- `memento-note/components/rich-text-editor.tsx` -- Already uses DragHandleExtension and drag-handle-react (confirmed on disk)
+
+## Tasks & Acceptance
+
+**Execution:**
+- [x] `memento-note/app/globals.css` -- Fix .drag-handle visibility cascade, add pointer-events, restructure inner .notion-drag-handle as child element
+
+**Acceptance Criteria:**
+- Given a note is open in the editor, when the user hovers over a block (paragraph, heading, list item), then the drag handle appears in the gutter with blue hover state
+- Given the drag handle is visible, when the user clicks it, then the block action menu opens
+- Given the drag handle is in its default hidden state, when the editor loads, then no drag handle is visible (opacity: 0, pointer-events: none)
+
+## Spec Change Log
+
+<!-- Empty - one-shot fix with no review loops -->
+
+## Suggested Review Order
+
+1. `memento-note/app/globals.css:1087-1135` -- CSS changes only; verify cascade correctness