feel: float the card hover toolbar as a top-right pill
CI & Build / Python lint (push) Successful in 3s
CI & Build / TypeScript typecheck (push) Successful in 5s
CI & Build / Python tests (push) Successful in 8s
CI & Build / Build & push image (push) Successful in 26s

Move the overlay toolbar from bottom-right to top-right and make it a
rounded-full pill (window-control style, per operator). Top placement also
avoids ever overlapping the reminder/label chips at the card bottom.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm
This commit is contained in:
2026-07-20 10:16:34 -04:00
co-authored by Claude Opus 4.8
parent 6b0ac7696f
commit d7c452ca2b
+5 -4
View File
@@ -105,11 +105,12 @@ function cardClass(color: NoteColor): string {
</span> </span>
</div> </div>
<!-- Toolbar overlays the card's bottom-right on hover/focus instead of <!-- Toolbar overlays the card's top-right on hover/focus as a floating pill
reserving a permanent row so at rest the card is content-sized with (window-control style) instead of reserving a permanent row so at rest
even padding, not text pinned to the top above an empty strip. --> the card is content-sized with even padding, not text pinned to the top
above an empty strip. -->
<div <div
class="pointer-events-none absolute bottom-1.5 right-1.5 flex items-center gap-0.5 rounded-lg bg-white/85 p-0.5 opacity-0 shadow-sm ring-1 ring-black/5 backdrop-blur-sm transition focus-within:pointer-events-auto focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100 dark:bg-neutral-900/85 dark:ring-white/10" class="pointer-events-none absolute right-1.5 top-1.5 flex items-center gap-0.5 rounded-full bg-white/85 p-0.5 opacity-0 shadow-sm ring-1 ring-black/5 backdrop-blur-sm transition focus-within:pointer-events-auto focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100 dark:bg-neutral-900/85 dark:ring-white/10"
> >
<template v-if="note.trashed"> <template v-if="note.trashed">
<button type="button" class="icon-btn" title="Restore" aria-label="Restore" @click="notes.restore(note.id)"> <button type="button" class="icon-btn" title="Restore" aria-label="Restore" @click="notes.restore(note.id)">