From e9c380c35ced7ccda6821b7dfe877f5296c9095b Mon Sep 17 00:00:00 2001
From: Timothy Cardoza <tcardoza@cardoza.construction>
Date: Wed, 4 Mar 2026 10:01:54 -0600
Subject: [PATCH] description fixes and delete button location improvements

---
 src/components/TaskDetail.tsx | 89 ++++++++++++++++++-----------------
 src/components/TaskEditor.tsx |  2 +-
 src/views/NotepadView.tsx     | 30 ++++++------
 3 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/src/components/TaskDetail.tsx b/src/components/TaskDetail.tsx
index 4e4335a..d17b067 100644
--- a/src/components/TaskDetail.tsx
+++ b/src/components/TaskDetail.tsx
@@ -417,58 +417,59 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                         />
                     </Suspense>
 
-                    {/* Tags at the bottom */}
-                    <div class="mt-auto pt-6 border-t border-border/50">
-                        <div class="flex flex-wrap items-center gap-3">
-                            <span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/60 shrink-0">Tags</span>
-                            <div class="flex flex-wrap items-center gap-1.5 min-w-0 flex-1">
-                                <TagPicker
-                                    selectedTags={visibleTags()}
-                                    onTagsChange={updateTags}
-                                />
-                                <div class="flex flex-wrap items-center gap-1.5">
-                                    <For each={visibleTags()}>
-                                        {(tag) => (
-                                            <Badge
-                                                variant="secondary"
-                                                class="h-7 px-2 text-xs gap-1.5 bg-muted/30 border-border/50 hover:bg-destructive/10 hover:border-destructive/30 cursor-pointer group/tag transition-all whitespace-nowrap shrink-0"
+                </div>
+
+                {/* Sticky Tags Area */}
+                <div class="px-6 py-3 border-t border-border/50 shrink-0 bg-card/80 backdrop-blur-sm z-10 w-full overflow-hidden">
+                    <div class="flex flex-wrap items-center gap-3">
+                        <span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/60 shrink-0">Tags</span>
+                        <div class="flex flex-nowrap overflow-x-auto no-scrollbar items-center gap-1.5 min-w-0 flex-1 pb-1">
+                            <TagPicker
+                                selectedTags={visibleTags()}
+                                onTagsChange={updateTags}
+                            />
+                            <div class="flex flex-nowrap items-center gap-1.5 shrink-0 pr-2">
+                                <For each={visibleTags()}>
+                                    {(tag) => (
+                                        <Badge
+                                            variant="secondary"
+                                            class="h-7 px-2 text-xs gap-1.5 bg-muted/30 border-border/50 hover:bg-destructive/10 hover:border-destructive/30 cursor-pointer group/tag transition-all whitespace-nowrap shrink-0"
+                                            style={{
+                                                "background-color": (() => {
+                                                    const def = store.tagDefinitions.find(d => d.name === tag);
+                                                    const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
+                                                    return color ? `${color}15` : undefined;
+                                                })(),
+                                                "border-color": (() => {
+                                                    const def = store.tagDefinitions.find(d => d.name === tag);
+                                                    const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
+                                                    return color ? `${color}30` : undefined;
+                                                })(),
+                                                "color": (() => {
+                                                    const def = store.tagDefinitions.find(d => d.name === tag);
+                                                    return getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme()) || "inherit";
+                                                })()
+                                            }}
+                                            onClick={() => updateTags(visibleTags().filter(t => t !== tag))}
+                                        >
+                                            <div
+                                                class="w-1.5 h-1.5 rounded-full"
                                                 style={{
-                                                    "background-color": (() => {
-                                                        const def = store.tagDefinitions.find(d => d.name === tag);
-                                                        const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
-                                                        return color ? `${color}15` : undefined;
-                                                    })(),
-                                                    "border-color": (() => {
-                                                        const def = store.tagDefinitions.find(d => d.name === tag);
-                                                        const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
-                                                        return color ? `${color}30` : undefined;
-                                                    })(),
-                                                    "color": (() => {
-                                                        const def = store.tagDefinitions.find(d => d.name === tag);
-                                                        return getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme()) || "inherit";
-                                                    })()
+                                                    "background-color": (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) > 5 ? "#22c55e" : (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) < 5 ? "#ef4444" : "#94a3b8"
                                                 }}
-                                                onClick={() => updateTags(visibleTags().filter(t => t !== tag))}
-                                            >
-                                                <div
-                                                    class="w-1.5 h-1.5 rounded-full"
-                                                    style={{
-                                                        "background-color": (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) > 5 ? "#22c55e" : (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) < 5 ? "#ef4444" : "#94a3b8"
-                                                    }}
-                                                />
-                                                {tag}
-                                                <X size={12} class="opacity-0 group-hover/tag:opacity-50 transition-opacity" />
-                                            </Badge>
-                                        )}
-                                    </For>
-                                </div>
+                                            />
+                                            {tag}
+                                            <X size={12} class="opacity-0 group-hover/tag:opacity-50 transition-opacity" />
+                                        </Badge>
+                                    )}
+                                </For>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 {/* Sticky Footer Actions */}
-                <div class="px-6 py-4 border-t border-border/50 flex items-center justify-between shrink-0 bg-background/80 backdrop-blur-sm">
+                <div class="px-6 py-4 border-t border-border/50 flex items-center justify-between shrink-0 bg-background/80 backdrop-blur-sm z-20 w-full relative">
                     {/* Delete button (persistent) */}
                     <Button
                         variant="ghost"
diff --git a/src/components/TaskEditor.tsx b/src/components/TaskEditor.tsx
index 62a5fe2..bc2da06 100644
--- a/src/components/TaskEditor.tsx
+++ b/src/components/TaskEditor.tsx
@@ -239,7 +239,7 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
 
     // Handle full screen images as before
     return (
-        <div class="relative w-full h-full flex flex-col">
+        <div class="relative w-full flex flex-col flex-1">
             <div
                 class="absolute -top-6 -left-4 -right-4 h-8 cursor-pointer group flex items-center justify-center z-10"
                 onClick={() => {
diff --git a/src/views/NotepadView.tsx b/src/views/NotepadView.tsx
index 2c10586..997456a 100644
--- a/src/views/NotepadView.tsx
+++ b/src/views/NotepadView.tsx
@@ -224,21 +224,6 @@ export const NotepadView: Component<{
                                             editable={canEdit}
                                         />
                                     </div>
-
-                                    {/* Close button (Mobile only) */}
-                                    <Show when={!props.hideNavigation}>
-                                        <div class="md:hidden flex justify-end pb-4 pt-2">
-                                            <Button
-                                                variant="ghost"
-                                                size="sm"
-                                                class="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} />
-                                                <span class="text-xs font-bold uppercase tracking-wider">Close</span>
-                                            </Button>
-                                        </div>
-                                    </Show>
                                 </div>
 
                                 {/* Linked Tasks Sidebar */}
@@ -369,10 +354,23 @@ 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))]">
+                                        <Button
+                                            variant="secondary"
+                                            class="w-full h-11 rounded-xl text-sm font-bold shadow-sm"
+                                            onClick={() => props.setSelectedNoteId(null)}
+                                        >
+                                            <X size={16} class="mr-2" />
+                                            Close Note
+                                        </Button>
+                                    </div>
+                                </Show>
                             </>
                         );
                     }}
-                </Show>
+                </Show >
             </div>
         </div >
     );