From abbdb993d56d7191fda82ee5dccfd2727bb669aa Mon Sep 17 00:00:00 2001
From: Timothy Cardoza <tcardoza@cardoza.construction>
Date: Fri, 13 Mar 2026 16:11:57 -0500
Subject: [PATCH] Tabe controls stable

---
 src/components/TableBubbleMenu.tsx | 12 +++----
 src/components/TaskDetail.tsx      |  6 ++--
 src/components/TaskEditor.tsx      | 56 ++++++++++++++++--------------
 src/views/NotepadView.tsx          |  2 +-
 4 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/components/TableBubbleMenu.tsx b/src/components/TableBubbleMenu.tsx
index 07af558..3e0cad7 100644
--- a/src/components/TableBubbleMenu.tsx
+++ b/src/components/TableBubbleMenu.tsx
@@ -1,7 +1,7 @@
 import { type Component, createSignal, createEffect, For } from "solid-js";
-import { 
-  Trash2, 
-  Type 
+import {
+    Trash2,
+    Type
 } from "lucide-solid";
 import { cn } from "@/lib/utils";
 import type { Editor } from "@tiptap/core";
@@ -132,10 +132,10 @@ export const TableBubbleMenu: Component<TableBubbleMenuProps> = (props) => {
     ];
 
     return (
-        <div 
+        <div
             class={cn(
-                "sticky top-0 z-[150] w-full bg-background/80 backdrop-blur-md border-b border-border transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
-                isVisible() ? "h-10 opacity-100 mb-2" : "h-0 opacity-0 pointer-events-none"
+                "relative z-[150] w-full bg-background/80 backdrop-blur-md border-b border-border transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
+                isVisible() ? "h-9 opacity-100" : "h-0 opacity-0 pointer-events-none"
             )}
             onMouseDown={(e) => {
                 e.preventDefault();
diff --git a/src/components/TaskDetail.tsx b/src/components/TaskDetail.tsx
index 9f92978..c227647 100644
--- a/src/components/TaskDetail.tsx
+++ b/src/components/TaskDetail.tsx
@@ -233,10 +233,10 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                         e.preventDefault();
                     }
                 }}
-                class="w-full sm:max-w-2xl px-0 sm:px-0 flex flex-col h-full bg-background border-l border-border shadow-2xl"
+                class="w-full sm:max-w-2xl p-0 gap-0 flex flex-col h-full bg-background border-l border-border shadow-2xl"
             >
                 {/* Header Area */}
-                <div class="px-6 pt-6 pb-2 shrink-0">
+                <div class="px-6 pt-6 pb-0 shrink-0">
                     <div class="flex items-start gap-4">
                         <div class="shrink-0 mt-0.5">
                             <Select<any>
@@ -496,7 +496,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                 </div>
 
                 {/* Content Area */}
-                <div class="flex-1 overflow-y-auto px-6 py-4 pb-20 flex flex-col gap-6">
+                <div class="flex-1 overflow-y-auto px-6 pb-20 flex flex-col">
                     <Suspense fallback={<div class="h-32 animate-pulse bg-muted/20 rounded-lg" />}>
                         <TaskEditor
                             content={props.task.content}
diff --git a/src/components/TaskEditor.tsx b/src/components/TaskEditor.tsx
index fc7b6ba..ec91017 100644
--- a/src/components/TaskEditor.tsx
+++ b/src/components/TaskEditor.tsx
@@ -322,36 +322,38 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
 
     // Handle full screen images as before
     return (
-        <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={() => {
-                    const e = editor();
-                    if (!e) return;
-                    e.chain().insertContentAt(0, '<p></p>').focus('start').run();
-                }}
-                title="Add empty line at the top"
-            >
-                <span class="opacity-0 group-hover:opacity-100 text-[10px] uppercase font-bold text-muted-foreground tracking-widest transition-opacity mt-1">
-                    Click to insert newline above
-                </span>
-            </div>
+        <div class="w-full h-full flex flex-col">
             <Show when={editor()}>
                 {(e) => <TableBubbleMenu editor={e()} />}
             </Show>
-            <div
-                ref={editorRef}
-                class="w-full flex-1 cursor-text"
-                onClick={(e) => {
-                    const target = e.target as HTMLElement;
-                    if (target.tagName.toLowerCase() === 'img') {
-                        setFullscreenImage((target as HTMLImageElement).src);
-                    } else if (e.target === editorRef) {
-                        // Focus end if clicking on padding below content
-                        editor()?.chain().focus().run();
-                    }
-                }}
-            />
+            <div class="w-full flex-1 flex flex-col">
+                <div
+                    class="w-full h-8 cursor-pointer group flex items-center justify-center shrink-0 transition-all"
+                    onClick={() => {
+                        const e = editor();
+                        if (!e) return;
+                        e.chain().insertContentAt(0, '<p></p>').focus('start').run();
+                    }}
+                    title="Add empty line at the top"
+                >
+                    <span class="opacity-0 group-hover:opacity-100 text-[10px] uppercase font-bold text-muted-foreground tracking-widest transition-opacity">
+                        Click to insert newline above
+                    </span>
+                </div>
+                <div
+                    ref={editorRef}
+                    class="w-full flex-1 cursor-text"
+                    onClick={(e) => {
+                        const target = e.target as HTMLElement;
+                        if (target.tagName.toLowerCase() === 'img') {
+                            setFullscreenImage((target as HTMLImageElement).src);
+                        } else if (e.target === editorRef) {
+                            // Focus end if clicking on padding below content
+                            editor()?.chain().focus().run();
+                        }
+                    }}
+                />
+            </div>
 
             {/* Note Preview Popover */}
             <Show when={previewNote() && store.notes.find(n => n.id === previewNote()!.noteId)}>
diff --git a/src/views/NotepadView.tsx b/src/views/NotepadView.tsx
index 3180b4a..e3a9c19 100644
--- a/src/views/NotepadView.tsx
+++ b/src/views/NotepadView.tsx
@@ -567,7 +567,7 @@ export const NotepadView: Component<{
                                         {/* Editor Instance */}
                                         <div class={cn(
                                             "grow shrink-0 flex flex-col",
-                                            hasTopViewer() ? "border-none rounded-none p-0 shadow-none mb-0 min-h-full" : "min-h-[300px] mb-4 p-4 border border-border/50 rounded-xl bg-background shadow-sm"
+                                            hasTopViewer() ? "border-none rounded-none p-0 shadow-none mb-0 min-h-full" : "min-h-[300px] mb-4 px-4 pt-0 pb-4 border border-border/50 rounded-xl bg-background shadow-sm"
                                         )}>
                                             <TaskEditor
                                                 content={note().content}