From 50be154dc4298482aa4cacbed21b5c5bbff41ae1 Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Sat, 28 Feb 2026 03:22:34 -0600
Subject: [PATCH] Fix mobile drawer More list overflowing viewport by rendering
 inline

---
 src/components/MobileDrawer.tsx    |  1 +
 src/components/SidebarMoreMenu.tsx | 52 +++++++++++++++++++++++++++++-
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/components/MobileDrawer.tsx b/src/components/MobileDrawer.tsx
index cbfd5017..debd1a42 100644
--- a/src/components/MobileDrawer.tsx
+++ b/src/components/MobileDrawer.tsx
@@ -164,6 +164,7 @@ export function MobileDrawer({ open, onOpenChange }: MobileDrawerProps) {
                   onNavigate={handleClose}
                   open={moreMenuOpen}
                   onOpenChange={setMoreMenuOpen}
+                  inline
                 />
               </nav>
 
diff --git a/src/components/SidebarMoreMenu.tsx b/src/components/SidebarMoreMenu.tsx
index d88fdf98..1beb98be 100644
--- a/src/components/SidebarMoreMenu.tsx
+++ b/src/components/SidebarMoreMenu.tsx
@@ -16,10 +16,12 @@ interface SidebarMoreMenuProps {
   onNavigate?: () => void;
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  /** Render items inline (no portal dropdown) — use inside scrollable containers like the mobile drawer */
+  inline?: boolean;
 }
 
 export function SidebarMoreMenu({
-  editing, hiddenItems, onDoneEditing, onStartEditing, onAdd, onNavigate, open, onOpenChange,
+  editing, hiddenItems, onDoneEditing, onStartEditing, onAdd, onNavigate, open, onOpenChange, inline,
 }: SidebarMoreMenuProps) {
   if (editing) {
     return (
@@ -33,6 +35,54 @@ export function SidebarMoreMenu({
     );
   }
 
+  if (inline) {
+    return (
+      <div className="flex flex-col">
+        {/* Toggle button */}
+        <button
+          onClick={() => onOpenChange(!open)}
+          className="flex items-center gap-4 px-4 py-2.5 rounded-full transition-colors text-sm text-muted-foreground/60 hover:text-muted-foreground hover:bg-secondary/40 bg-background/85"
+        >
+          <Plus className="size-4" />
+          <span>More...</span>
+        </button>
+
+        {/* Inline expanded list */}
+        {open && (
+          <div className="flex flex-col gap-0.5 pl-2">
+            {hiddenItems.map((item) => (
+              <div key={item.id} className="flex items-center">
+                <Link
+                  to={itemPath(item.id)}
+                  onClick={() => { onOpenChange(false); onNavigate?.(); }}
+                  className="flex items-center gap-3 flex-1 min-w-0 px-2 py-2 rounded-sm text-sm hover:bg-secondary/60 transition-colors"
+                >
+                  {sidebarItemIcon(item.id, 'size-5 shrink-0')}
+                  <span className="truncate">{item.label}</span>
+                </Link>
+                <button
+                  onClick={() => { onAdd(item.id); onOpenChange(false); }}
+                  className="size-8 flex items-center justify-center shrink-0 rounded-sm text-muted-foreground hover:text-primary hover:bg-primary/10 transition-colors"
+                  title={`Add ${item.label} to sidebar`}
+                >
+                  <Plus className="size-4" />
+                </button>
+              </div>
+            ))}
+            {hiddenItems.length > 0 && <div className="h-px bg-border my-1" />}
+            <button
+              onClick={() => { onStartEditing(); onOpenChange(false); }}
+              className="flex items-center gap-3 w-full px-2 py-2 rounded-sm text-sm hover:bg-secondary/60 transition-colors cursor-pointer"
+            >
+              <Pencil className="size-5" />
+              <span>Edit sidebar</span>
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  }
+
   return (
     <DropdownMenu open={open} onOpenChange={onOpenChange}>
       <DropdownMenuTrigger asChild>