---
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