From ac119c288bf60ea49cfe864731869c8ab9b21a90 Mon Sep 17 00:00:00 2001
From: Timothy Cardoza <tcardoza@cardoza.construction>
Date: Wed, 4 Mar 2026 14:07:33 -0600
Subject: [PATCH] Notes view layout fixes

---
 src/views/NotepadView.tsx | 48 +++++++++++++++++++++------------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/views/NotepadView.tsx b/src/views/NotepadView.tsx
index 997456a..ee9b1a4 100644
--- a/src/views/NotepadView.tsx
+++ b/src/views/NotepadView.tsx
@@ -175,7 +175,7 @@ export const NotepadView: Component<{
                             <>
                                 {/* Editor Area */}
                                 <div class="flex-1 flex flex-col min-w-0 md:h-full overflow-visible md:overflow-y-auto relative p-4 md:p-6 space-y-4 md:space-y-6 scroll-smooth">
-                                    <div class="space-y-4">
+                                    <div class="space-y-4 sticky top-0 z-30 bg-card/95 backdrop-blur-sm pt-4 pb-2 -mt-4 -mx-4 px-4 md:pt-6 md:-mt-6 md:-mx-6 md:px-6 md:pb-2">
                                         <div class="flex items-start justify-between gap-4">
                                             <input
                                                 class="text-3xl sm:text-4xl font-black tracking-tight bg-transparent border-none outline-none focus:ring-0 flex-1 placeholder:text-muted-foreground/30 px-0 min-w-0"
@@ -200,17 +200,6 @@ export const NotepadView: Component<{
                                                         </Show>
                                                     </Button>
                                                 </Show>
-
-                                                <Show when={isOwner}>
-                                                    <Button
-                                                        variant="ghost"
-                                                        size="icon"
-                                                        class="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg"
-                                                        onClick={() => handleDeleteNote(note().id)}
-                                                    >
-                                                        <Trash2 size={16} />
-                                                    </Button>
-                                                </Show>
                                             </div>
                                         </div>
 
@@ -245,7 +234,7 @@ export const NotepadView: Component<{
                                             }}
                                         >
                                             <div class={cn("flex items-center gap-2", !isLinkedTasksOpen() && "md:flex-col")}>
-                                                <ChevronRight size={14} class={cn("text-muted-foreground transition-all duration-300 group-hover:text-foreground", !isLinkedTasksOpen() ? "rotate-90 md:rotate-0" : "rotate-90 md:rotate-180")} />
+                                                <ChevronRight size={14} class={cn("text-muted-foreground transition-all duration-300 group-hover:text-foreground", !isLinkedTasksOpen() ? "-rotate-90 md:rotate-180" : "rotate-90 md:rotate-0")} />
                                                 <Show when={isLinkedTasksOpen()} fallback={
                                                     <div class="hidden md:flex items-center justify-center -rotate-90 origin-center whitespace-nowrap mt-8 text-[0.625rem] font-bold uppercase tracking-widest text-muted-foreground/50">
                                                         <Link size={10} class="mr-2 rotate-90" />
@@ -354,19 +343,34 @@ export const NotepadView: Component<{
                                         </div>
                                     </Show>
                                 </div>
-                                <Show when={!props.hideNavigation}>
-                                    {/* Sticky Full-Width Mobile Close Footer */}
-                                    <div class="md:hidden sticky bottom-0 z-[60] p-4 bg-background/95 backdrop-blur-sm border-t border-border flex justify-end shrink-0 w-full shadow-[0_-10px_40px_-5px_hsl(var(--background))]">
+                                {/* Sticky Footer Actions (Match TaskDetail style) */}
+                                <div class="px-6 py-4 border-t border-border/50 md:hidden flex items-center justify-between shrink-0 bg-background/95 backdrop-blur-sm z-40 w-full sticky bottom-0">
+                                    {/* Delete button (persistent for owner) */}
+                                    <Show when={isOwner}>
                                         <Button
-                                            variant="secondary"
-                                            class="w-full h-11 rounded-xl text-sm font-bold shadow-sm"
+                                            variant="ghost"
+                                            size="sm"
+                                            class="h-9 px-3 gap-2 hover:bg-destructive/10 hover:text-destructive text-muted-foreground transition-all rounded-xl border border-border/40"
+                                            onClick={() => handleDeleteNote(note().id)}
+                                        >
+                                            <Trash2 size={16} />
+                                            <span class="text-xs font-bold uppercase tracking-wider">Delete</span>
+                                        </Button>
+                                    </Show>
+
+                                    <Show when={!props.hideNavigation}>
+                                        {/* Close button (Mobile only) */}
+                                        <Button
+                                            variant="ghost"
+                                            size="sm"
+                                            class="md:hidden h-9 px-3 gap-2 hover:bg-muted text-muted-foreground transition-all rounded-xl border border-border/40"
                                             onClick={() => props.setSelectedNoteId(null)}
                                         >
-                                            <X size={16} class="mr-2" />
-                                            Close Note
+                                            <X size={16} />
+                                            <span class="text-xs font-bold uppercase tracking-wider">Close</span>
                                         </Button>
-                                    </div>
-                                </Show>
+                                    </Show>
+                                </div>
                             </>
                         );
                     }}