From b640099fc58575b8a6529c94d3b2a5028d929b84 Mon Sep 17 00:00:00 2001
From: Michael Freno <michaelt.freno@gmail.com>
Date: Mon, 22 Dec 2025 11:01:01 -0500
Subject: [PATCH] mobile improvements

---
 src/components/CountdownCircleTimer.tsx |  35 +-
 src/components/blog/TextEditor.tsx      | 897 +++++++++++++-----------
 src/routes/login/password-reset.tsx     |   2 +-
 3 files changed, 496 insertions(+), 438 deletions(-)

diff --git a/src/components/CountdownCircleTimer.tsx b/src/components/CountdownCircleTimer.tsx
index c22b69d..2b4e47b 100644
--- a/src/components/CountdownCircleTimer.tsx
+++ b/src/components/CountdownCircleTimer.tsx
@@ -24,20 +24,28 @@ const CountdownCircleTimer: Component<CountdownCircleTimerProps> = (props) => {
   const strokeDashoffset = () => circumference * (1 - progress());
 
   onMount(() => {
-    const interval = setInterval(() => {
-      setRemainingTime((prev) => {
-        const newTime = prev - 1;
-        if (newTime <= 0) {
-          clearInterval(interval);
-          props.onComplete?.();
-          return 0;
-        }
-        return newTime;
-      });
-    }, 1000);
+    const startTime = Date.now();
+    const initialTime = remainingTime();
+    let animationFrameId: number;
+
+    const animate = () => {
+      const elapsed = (Date.now() - startTime) / 1000;
+      const newTime = Math.max(0, initialTime - elapsed);
+
+      setRemainingTime(newTime);
+
+      if (newTime <= 0) {
+        props.onComplete?.();
+        return;
+      }
+
+      animationFrameId = requestAnimationFrame(animate);
+    };
+
+    animationFrameId = requestAnimationFrame(animate);
 
     onCleanup(() => {
-      clearInterval(interval);
+      cancelAnimationFrame(animationFrameId);
     });
   });
 
@@ -74,9 +82,6 @@ const CountdownCircleTimer: Component<CountdownCircleTimerProps> = (props) => {
           stroke-dasharray={`${circumference}`}
           stroke-dashoffset={`${strokeDashoffset()}`}
           stroke-linecap="round"
-          style={{
-            transition: "stroke-dashoffset 0.5s linear"
-          }}
         />
       </svg>
       {/* Timer text in center */}
diff --git a/src/components/blog/TextEditor.tsx b/src/components/blog/TextEditor.tsx
index ff2c8c5..523b3a6 100644
--- a/src/components/blog/TextEditor.tsx
+++ b/src/components/blog/TextEditor.tsx
@@ -381,6 +381,8 @@ export default function TextEditor(props: TextEditorProps) {
   const [showKeyboardHelp, setShowKeyboardHelp] = createSignal(false);
 
   const [isFullscreen, setIsFullscreen] = createSignal(false);
+  const [keyboardVisible, setKeyboardVisible] = createSignal(false);
+  const [keyboardHeight, setKeyboardHeight] = createSignal(0);
 
   const editor = createTiptapEditor(() => ({
     element: editorRef,
@@ -1040,6 +1042,36 @@ export default function TextEditor(props: TextEditorProps) {
     }
   });
 
+  // Detect mobile keyboard visibility
+  createEffect(() => {
+    if (typeof window === "undefined" || !window.visualViewport) return;
+
+    const viewport = window.visualViewport;
+    const initialHeight = viewport.height;
+
+    const handleResize = () => {
+      const currentHeight = viewport.height;
+      const heightDiff = initialHeight - currentHeight;
+
+      // If viewport height decreased by more than 150px, keyboard is likely open
+      if (heightDiff > 150) {
+        setKeyboardVisible(true);
+        setKeyboardHeight(heightDiff);
+      } else {
+        setKeyboardVisible(false);
+        setKeyboardHeight(0);
+      }
+    };
+
+    viewport.addEventListener("resize", handleResize);
+    viewport.addEventListener("scroll", handleResize);
+
+    return () => {
+      viewport.removeEventListener("resize", handleResize);
+      viewport.removeEventListener("scroll", handleResize);
+    };
+  });
+
   // Table Grid Selector Component
   const TableGridSelector = () => {
     const [hoverCell, setHoverCell] = createSignal({ row: 0, col: 0 });
@@ -1096,7 +1128,7 @@ export default function TextEditor(props: TextEditorProps) {
       ref={containerRef}
       class="border-surface2 text-text w-full max-w-full overflow-hidden rounded-md border px-4 py-2"
       classList={{
-        "fixed inset-0 z-[100] m-0 h-screen max-h-screen rounded-none":
+        "fixed inset-0 z-[100] m-0 h-screen max-h-screen rounded-none flex flex-col":
           isFullscreen(),
         "bg-base": isFullscreen()
       }}
@@ -1443,443 +1475,461 @@ export default function TextEditor(props: TextEditorProps) {
               </div>
             </Show>
 
-            <div class="border-surface2 mb-2 flex flex-wrap gap-1 border-b pb-2">
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().toggleHeading({ level: 1 }).run()
-                }
-                class={`${
-                  instance().isActive("heading", { level: 1 })
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Heading 1"
-              >
-                H1
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().toggleHeading({ level: 2 }).run()
-                }
-                class={`${
-                  instance().isActive("heading", { level: 2 })
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Heading 2"
-              >
-                H2
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().toggleHeading({ level: 3 }).run()
-                }
-                class={`${
-                  instance().isActive("heading", { level: 3 })
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Heading 3"
-              >
-                H3
-              </button>
-              <div class="border-surface2 mx-1 border-l"></div>
-              <button
-                type="button"
-                onClick={() => instance().chain().focus().toggleBold().run()}
-                class={`${
-                  instance().isActive("bold")
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Bold"
-              >
-                <strong>B</strong>
-              </button>
-              <button
-                type="button"
-                onClick={() => instance().chain().focus().toggleItalic().run()}
-                class={`${
-                  instance().isActive("italic")
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Italic"
-              >
-                <em>I</em>
-              </button>
-              <button
-                type="button"
-                onClick={() => instance().chain().focus().toggleStrike().run()}
-                class={`${
-                  instance().isActive("strike")
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Strikethrough"
-              >
-                <s>S</s>
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().toggleSuperscript().run()
-                }
-                class={`${
-                  instance().isActive("superscript")
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Superscript (for references)"
-              >
-                X<sup class="text-[0.6em]">n</sup>
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().toggleSubscript().run()
-                }
-                class={`${
-                  instance().isActive("subscript")
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Subscript"
-              >
-                X<sub class="text-[0.6em]">n</sub>
-              </button>
-              <div class="border-surface2 mx-1 border-l"></div>
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().toggleBulletList().run()
-                }
-                class={`${
-                  instance().isActive("bulletList")
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Bullet List"
-              >
-                • List
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().toggleOrderedList().run()
-                }
-                class={`${
-                  instance().isActive("orderedList")
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Ordered List"
-              >
-                1. List
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().toggleTaskList().run()
-                }
-                class={`${
-                  instance().isActive("taskList")
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Task List"
-              >
-                ☑ Tasks
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().toggleBlockquote().run()
-                }
-                class={`${
-                  instance().isActive("blockquote")
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Blockquote"
-              >
-                " Quote
-              </button>
-              <button
-                type="button"
-                onClick={insertCollapsibleSection}
-                class="hover:bg-surface1 rounded px-2 py-1 text-xs"
-                title="Insert Collapsible Section"
-              >
-                ▼ Details
-              </button>
-              <div class="border-surface2 mx-1 border-l"></div>
-
-              {/* Text Alignment */}
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().setTextAlign("left").run()
-                }
-                class={`${
-                  instance().isActive({ textAlign: "left" })
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Align Left"
-              >
-                ⬅
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().setTextAlign("center").run()
-                }
-                class={`${
-                  instance().isActive({ textAlign: "center" })
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Align Center"
-              >
-                ↔
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().setTextAlign("right").run()
-                }
-                class={`${
-                  instance().isActive({ textAlign: "right" })
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Align Right"
-              >
-                ➡
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().setTextAlign("justify").run()
-                }
-                class={`${
-                  instance().isActive({ textAlign: "justify" })
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Justify"
-              >
-                ⬌
-              </button>
-              <div class="border-surface2 mx-1 border-l"></div>
-              <button
-                type="button"
-                onClick={showLanguagePicker}
-                data-language-picker-trigger
-                class={`${
-                  instance().isActive("codeBlock")
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Code Block"
-              >
-                {"</>"}
-              </button>
-              <button
-                type="button"
-                onClick={setLink}
-                class={`${
-                  instance().isActive("link")
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Add Link"
-              >
-                🔗 Link
-              </button>
-              <button
-                type="button"
-                onClick={addImage}
-                class="hover:bg-surface1 rounded px-2 py-1 text-xs"
-                title="Add Image"
-              >
-                🖼 Image
-              </button>
-              <button
-                type="button"
-                onClick={addIframe}
-                class="hover:bg-surface1 rounded px-2 py-1 text-xs"
-                title="Add Iframe"
-              >
-                📺 Iframe
-              </button>
-              <button
-                type="button"
-                onClick={showTableInserter}
-                data-table-trigger
-                class={`${
-                  instance().isActive("table")
-                    ? "bg-surface2"
-                    : "hover:bg-surface1"
-                } rounded px-2 py-1 text-xs`}
-                title="Insert Table"
-              >
-                ⊞ Table
-              </button>
-              <button
-                type="button"
-                onClick={showMermaidSelector}
-                data-mermaid-trigger
-                class="hover:bg-surface1 rounded px-2 py-1 text-xs"
-                title="Insert Diagram"
-              >
-                📊 Diagram
-              </button>
-              <div class="border-surface2 mx-1 border-l"></div>
-              <button
-                type="button"
-                onClick={() =>
-                  instance().chain().focus().setHorizontalRule().run()
-                }
-                class="bg-surface0 hover:bg-surface1 rounded px-3 py-1 text-xs"
-                title="Horizontal Rule"
-              >
-                ━━ HR
-              </button>
-              <div class="border-surface2 mx-1 border-l"></div>
-              <button
-                type="button"
-                onClick={toggleFullscreen}
-                class="hover:bg-surface1 rounded px-2 py-1 text-xs"
-                title={
-                  isFullscreen() ? "Exit Fullscreen (ESC)" : "Enter Fullscreen"
-                }
-              >
-                {isFullscreen() ? "⇲ Exit" : "⇱ Fullscreen"}
-              </button>
-              <button
-                type="button"
-                onClick={() => setShowKeyboardHelp(!showKeyboardHelp())}
-                class="hover:bg-surface1 rounded px-2 py-1 text-xs"
-                title="Keyboard Shortcuts"
-              >
-                ⌨ Help
-              </button>
-
-              {/* Table controls - shown when cursor is in a table */}
-              <Show when={instance().isActive("table")}>
-                <div class="border-surface2 mx-1 border-l"></div>
-
+            {/* Main Toolbar - Pinned at top in fullscreen */}
+            <div
+              class="border-surface2 bg-base border-b"
+              classList={{
+                "sticky top-0 z-[105]": isFullscreen()
+              }}
+            >
+              <div class="flex flex-wrap gap-1 pb-2">
                 <button
                   type="button"
                   onClick={() =>
-                    instance().chain().focus().addColumnBefore().run()
-                  }
-                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
-                  title="Add Column Before"
-                >
-                  ← Col
-                </button>
-
-                <button
-                  type="button"
-                  onClick={() =>
-                    instance().chain().focus().addColumnAfter().run()
-                  }
-                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
-                  title="Add Column After"
-                >
-                  Col →
-                </button>
-
-                <button
-                  type="button"
-                  onClick={deleteColumnWithConfirmation}
-                  class="hover:bg-red bg-opacity-20 rounded px-2 py-1 text-xs"
-                  title="Delete Column"
-                >
-                  ✕ Col
-                </button>
-
-                <div class="border-surface2 mx-1 border-l"></div>
-
-                <button
-                  type="button"
-                  onClick={() =>
-                    instance().chain().focus().addRowBefore().run()
-                  }
-                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
-                  title="Add Row Before"
-                >
-                  ↑ Row
-                </button>
-
-                <button
-                  type="button"
-                  onClick={() => instance().chain().focus().addRowAfter().run()}
-                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
-                  title="Add Row After"
-                >
-                  Row ↓
-                </button>
-
-                <button
-                  type="button"
-                  onClick={deleteRowWithConfirmation}
-                  class="hover:bg-red bg-opacity-20 rounded px-2 py-1 text-xs"
-                  title="Delete Row"
-                >
-                  ✕ Row
-                </button>
-
-                <div class="border-surface2 mx-1 border-l"></div>
-
-                <button
-                  type="button"
-                  onClick={deleteTableWithConfirmation}
-                  class="hover:bg-red rounded px-2 py-1 text-xs"
-                  title="Delete Table"
-                >
-                  ✕ Table
-                </button>
-
-                <button
-                  type="button"
-                  onClick={() =>
-                    instance().chain().focus().toggleHeaderRow().run()
+                    instance().chain().focus().toggleHeading({ level: 1 }).run()
                   }
                   class={`${
-                    instance().isActive("tableHeader")
+                    instance().isActive("heading", { level: 1 })
                       ? "bg-surface2"
                       : "hover:bg-surface1"
                   } rounded px-2 py-1 text-xs`}
-                  title="Toggle Header Row"
+                  title="Heading 1"
                 >
-                  ≡ Header
+                  H1
                 </button>
-
                 <button
                   type="button"
-                  onClick={() => instance().chain().focus().mergeCells().run()}
-                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
-                  title="Merge Cells"
+                  onClick={() =>
+                    instance().chain().focus().toggleHeading({ level: 2 }).run()
+                  }
+                  class={`${
+                    instance().isActive("heading", { level: 2 })
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Heading 2"
                 >
-                  ⊡ Merge
+                  H2
                 </button>
-
                 <button
                   type="button"
-                  onClick={() => instance().chain().focus().splitCell().run()}
-                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
-                  title="Split Cell"
+                  onClick={() =>
+                    instance().chain().focus().toggleHeading({ level: 3 }).run()
+                  }
+                  class={`${
+                    instance().isActive("heading", { level: 3 })
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Heading 3"
                 >
-                  ⊞ Split
+                  H3
                 </button>
-              </Show>
+                <div class="border-surface2 mx-1 border-l"></div>
+                <button
+                  type="button"
+                  onClick={() => instance().chain().focus().toggleBold().run()}
+                  class={`${
+                    instance().isActive("bold")
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Bold"
+                >
+                  <strong>B</strong>
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    instance().chain().focus().toggleItalic().run()
+                  }
+                  class={`${
+                    instance().isActive("italic")
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Italic"
+                >
+                  <em>I</em>
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    instance().chain().focus().toggleStrike().run()
+                  }
+                  class={`${
+                    instance().isActive("strike")
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Strikethrough"
+                >
+                  <s>S</s>
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    instance().chain().focus().toggleSuperscript().run()
+                  }
+                  class={`${
+                    instance().isActive("superscript")
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Superscript (for references)"
+                >
+                  X<sup class="text-[0.6em]">n</sup>
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    instance().chain().focus().toggleSubscript().run()
+                  }
+                  class={`${
+                    instance().isActive("subscript")
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Subscript"
+                >
+                  X<sub class="text-[0.6em]">n</sub>
+                </button>
+                <div class="border-surface2 mx-1 border-l"></div>
+                <button
+                  type="button"
+                  onClick={() =>
+                    instance().chain().focus().toggleBulletList().run()
+                  }
+                  class={`${
+                    instance().isActive("bulletList")
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Bullet List"
+                >
+                  • List
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    instance().chain().focus().toggleOrderedList().run()
+                  }
+                  class={`${
+                    instance().isActive("orderedList")
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Ordered List"
+                >
+                  1. List
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    instance().chain().focus().toggleTaskList().run()
+                  }
+                  class={`${
+                    instance().isActive("taskList")
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Task List"
+                >
+                  ☑ Tasks
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    instance().chain().focus().toggleBlockquote().run()
+                  }
+                  class={`${
+                    instance().isActive("blockquote")
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Blockquote"
+                >
+                  " Quote
+                </button>
+                <button
+                  type="button"
+                  onClick={insertCollapsibleSection}
+                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                  title="Insert Collapsible Section"
+                >
+                  ▼ Details
+                </button>
+                <div class="border-surface2 mx-1 border-l"></div>
+
+                {/* Text Alignment */}
+                <button
+                  type="button"
+                  onClick={() =>
+                    instance().chain().focus().setTextAlign("left").run()
+                  }
+                  class={`${
+                    instance().isActive({ textAlign: "left" })
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Align Left"
+                >
+                  ⬅
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    instance().chain().focus().setTextAlign("center").run()
+                  }
+                  class={`${
+                    instance().isActive({ textAlign: "center" })
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Align Center"
+                >
+                  ↔
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    instance().chain().focus().setTextAlign("right").run()
+                  }
+                  class={`${
+                    instance().isActive({ textAlign: "right" })
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Align Right"
+                >
+                  ➡
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    instance().chain().focus().setTextAlign("justify").run()
+                  }
+                  class={`${
+                    instance().isActive({ textAlign: "justify" })
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Justify"
+                >
+                  ⬌
+                </button>
+                <div class="border-surface2 mx-1 border-l"></div>
+                <button
+                  type="button"
+                  onClick={showLanguagePicker}
+                  data-language-picker-trigger
+                  class={`${
+                    instance().isActive("codeBlock")
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Code Block"
+                >
+                  {"</>"}
+                </button>
+                <button
+                  type="button"
+                  onClick={setLink}
+                  class={`${
+                    instance().isActive("link")
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Add Link"
+                >
+                  🔗 Link
+                </button>
+                <button
+                  type="button"
+                  onClick={addImage}
+                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                  title="Add Image"
+                >
+                  🖼 Image
+                </button>
+                <button
+                  type="button"
+                  onClick={addIframe}
+                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                  title="Add Iframe"
+                >
+                  📺 Iframe
+                </button>
+                <button
+                  type="button"
+                  onClick={showTableInserter}
+                  data-table-trigger
+                  class={`${
+                    instance().isActive("table")
+                      ? "bg-surface2"
+                      : "hover:bg-surface1"
+                  } rounded px-2 py-1 text-xs`}
+                  title="Insert Table"
+                >
+                  ⊞ Table
+                </button>
+                <button
+                  type="button"
+                  onClick={showMermaidSelector}
+                  data-mermaid-trigger
+                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                  title="Insert Diagram"
+                >
+                  📊 Diagram
+                </button>
+                <div class="border-surface2 mx-1 border-l"></div>
+                <button
+                  type="button"
+                  onClick={() =>
+                    instance().chain().focus().setHorizontalRule().run()
+                  }
+                  class="bg-surface0 hover:bg-surface1 rounded px-3 py-1 text-xs"
+                  title="Horizontal Rule"
+                >
+                  ━━ HR
+                </button>
+                <div class="border-surface2 mx-1 border-l"></div>
+                <button
+                  type="button"
+                  onClick={toggleFullscreen}
+                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                  title={
+                    isFullscreen()
+                      ? "Exit Fullscreen (ESC)"
+                      : "Enter Fullscreen"
+                  }
+                >
+                  {isFullscreen() ? "⇲ Exit" : "⇱ Fullscreen"}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setShowKeyboardHelp(!showKeyboardHelp())}
+                  class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                  title="Keyboard Shortcuts"
+                >
+                  ⌨ Help
+                </button>
+
+                {/* Table controls - shown when cursor is in a table */}
+                <Show when={instance().isActive("table")}>
+                  <div class="border-surface2 mx-1 border-l"></div>
+
+                  <button
+                    type="button"
+                    onClick={() =>
+                      instance().chain().focus().addColumnBefore().run()
+                    }
+                    class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                    title="Add Column Before"
+                  >
+                    ← Col
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() =>
+                      instance().chain().focus().addColumnAfter().run()
+                    }
+                    class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                    title="Add Column After"
+                  >
+                    Col →
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={deleteColumnWithConfirmation}
+                    class="hover:bg-red bg-opacity-20 rounded px-2 py-1 text-xs"
+                    title="Delete Column"
+                  >
+                    ✕ Col
+                  </button>
+
+                  <div class="border-surface2 mx-1 border-l"></div>
+
+                  <button
+                    type="button"
+                    onClick={() =>
+                      instance().chain().focus().addRowBefore().run()
+                    }
+                    class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                    title="Add Row Before"
+                  >
+                    ↑ Row
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() =>
+                      instance().chain().focus().addRowAfter().run()
+                    }
+                    class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                    title="Add Row After"
+                  >
+                    Row ↓
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={deleteRowWithConfirmation}
+                    class="hover:bg-red bg-opacity-20 rounded px-2 py-1 text-xs"
+                    title="Delete Row"
+                  >
+                    ✕ Row
+                  </button>
+
+                  <div class="border-surface2 mx-1 border-l"></div>
+
+                  <button
+                    type="button"
+                    onClick={deleteTableWithConfirmation}
+                    class="hover:bg-red rounded px-2 py-1 text-xs"
+                    title="Delete Table"
+                  >
+                    ✕ Table
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() =>
+                      instance().chain().focus().toggleHeaderRow().run()
+                    }
+                    class={`${
+                      instance().isActive("tableHeader")
+                        ? "bg-surface2"
+                        : "hover:bg-surface1"
+                    } rounded px-2 py-1 text-xs`}
+                    title="Toggle Header Row"
+                  >
+                    ≡ Header
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() =>
+                      instance().chain().focus().mergeCells().run()
+                    }
+                    class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                    title="Merge Cells"
+                  >
+                    ⊡ Merge
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() => instance().chain().focus().splitCell().run()}
+                    class="hover:bg-surface1 rounded px-2 py-1 text-xs"
+                    title="Split Cell"
+                  >
+                    ⊞ Split
+                  </button>
+                </Show>
+              </div>
             </div>
           </>
         )}
@@ -1887,10 +1937,13 @@ export default function TextEditor(props: TextEditorProps) {
 
       <div
         ref={editorRef}
-        class="prose prose-sm prose-invert sm:prose-base md:prose-xl lg:prose-xl xl:prose-2xl mx-auto max-w-full overflow-scroll focus:outline-none"
+        class="prose prose-sm prose-invert sm:prose-base md:prose-xl lg:prose-xl xl:prose-2xl mx-auto max-w-full overflow-scroll transition-all duration-300 focus:outline-none"
         classList={{
           "h-[80dvh]": !isFullscreen(),
-          "h-[calc(100dvh-8rem)]": isFullscreen()
+          "flex-1 h-full": isFullscreen()
+        }}
+        style={{
+          "padding-bottom": keyboardVisible() ? `${keyboardHeight()}px` : "1rem"
         }}
       />
 
diff --git a/src/routes/login/password-reset.tsx b/src/routes/login/password-reset.tsx
index 09cad70..3606b9d 100644
--- a/src/routes/login/password-reset.tsx
+++ b/src/routes/login/password-reset.tsx
@@ -326,7 +326,7 @@ export default function PasswordResetPage() {
                   duration={5}
                   size={200}
                   strokeWidth={12}
-                  colors="#60a5fa"
+                  colors="var(--color-blue)"
                   onComplete={() => false}
                 >
                   {({ remainingTime }) => renderTime(remainingTime)}