From d7c452ca2b4bb00a9d76deb20c5a96765dd1ed2d Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 20 Jul 2026 10:16:34 -0400
Subject: [PATCH] feel: float the card hover toolbar as a top-right pill

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
---
 frontend/src/components/NoteCard.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/NoteCard.vue b/frontend/src/components/NoteCard.vue
index 71599f5..6d073d2 100644
--- a/frontend/src/components/NoteCard.vue
+++ b/frontend/src/components/NoteCard.vue
@@ -105,11 +105,12 @@ function cardClass(color: NoteColor): string {
       </span>
     </div>
 
-    <!-- Toolbar overlays the card's bottom-right on hover/focus instead of
-         reserving a permanent row — so at rest the card is content-sized with
-         even padding, not text pinned to the top above an empty strip. -->
+    <!-- Toolbar overlays the card's top-right on hover/focus as a floating pill
+         (window-control style) instead of reserving a permanent row — so at rest
+         the card is content-sized with even padding, not text pinned to the top
+         above an empty strip. -->
     <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">
         <button type="button" class="icon-btn" title="Restore" aria-label="Restore" @click="notes.restore(note.id)">