fix: Improve mobile navigation

Author: areknawo

apps/docs/src/components/fragments/header.tsx

@@ -83,6 +83,13 @@ const Header: Component = () => {
         text="soft"
         class="lg:min-w-48 justify-start m-0 group"
         onClick={() => {
+          // Force mobile keyboard to open (first focus must be in user-triggered event handler)
+          const ghostInput = document.createElement("input");
+
+          ghostInput.classList.add("absolute", "opacity-0", "pointer-events-none");
+          ghostInput.id = "ghost-input";
+          document.body.appendChild(ghostInput);
+          ghostInput.focus();
           setOpened(!opened());
         }}
       />

apps/docs/src/components/fragments/search-palette.tsx

@@ -164,6 +164,7 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
     if (inputRef() && props.opened && mode()) {
       setTimeout(() => {
         inputRef()?.focus();
+        document.getElementById("ghost-input")?.remove();
       }, 300);
     }
   });
@@ -247,7 +248,7 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
       opened={props.opened}
       class="items-start"
       shadeClass="bg-opacity-50"
-      wrapperClass="mt-32"
+      wrapperClass="mt-3 md:mt-32"
       onOverlayClick={() => {
         props.setOpened(false);
       }}

apps/web/src/context/command-palette/index.tsx

@@ -292,6 +292,7 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
     if (inputRef() && props.opened && mode()) {
       setTimeout(() => {
         inputRef()?.focus();
+        document.getElementById("ghost-input")?.remove();
       }, 300);
     }
   });
@@ -326,7 +327,7 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
       opened={props.opened}
       class="items-start"
       shadeClass="bg-opacity-50"
-      wrapperClass="mt-32"
+      wrapperClass="mt-3 md:mt-32"
       onOverlayClick={() => {
         props.setOpened(false);
       }}

apps/web/src/layout/toolbar/index.tsx

@@ -419,6 +419,13 @@ const toolbarViews: Record<string, Component<Record<string, any>>> = {
           text="soft"
           class="@xl:min-w-48 justify-start m-0 bg-gray-200 group"
           onClick={() => {
+            // Force mobile keyboard to open (first focus must be in user-triggered event handler)
+            const ghostInput = document.createElement("input");
+
+            ghostInput.classList.add("absolute", "opacity-0", "pointer-events-none");
+            ghostInput.id = "ghost-input";
+            document.body.appendChild(ghostInput);
+            ghostInput.focus();
             setOpened(true);
           }}
         />

apps/web/src/views/dashboard/views/kanban/content-group-column.tsx

@@ -28,7 +28,7 @@ import {
   useSharedState,
   useCommandPalette
 } from "#context";
-import { createRef } from "#lib/utils";
+import { breakpoints, createRef } from "#lib/utils";
 import { useContentPieces } from "#lib/composables";
 
 interface ContentGroupColumnProps {
@@ -224,7 +224,8 @@ const ContentGroupColumn: Component<ContentGroupColumnProps> = (props) => {
                 },
                 delayOnTouchOnly: true,
                 delay: 500,
-                disabled: !hasPermission("manageDashboard"),
+                fallbackOnBody: true,
+                disabled: !hasPermission("manageDashboard") || !breakpoints.md(),
                 ghostClass: "!hidden",
                 revertOnSpill: true,
                 onAdd(evt) {
@@ -406,6 +407,7 @@ const ContentGroupColumn: Component<ContentGroupColumnProps> = (props) => {
                   ghostClass: `:base: border-4 border-gray-200 opacity-50 dark:border-gray-700 children:invisible`,
                   group: "card",
                   disabled: !hasPermission("manageDashboard"),
+                  fallbackOnBody: true,
                   onStart(event) {
                     props.onDragStart?.();
                     setActiveDraggablePiece(

apps/web/src/views/dashboard/views/kanban/index.tsx

@@ -49,6 +49,7 @@ const DashboardKanbanView: Component<DashboardKanbanViewProps> = (props) => {
             ghostClass: `:base: border-4 border-gray-200 opacity-50 dark:border-gray-700 children:invisible !p-0 !m-2 !mt-0 !h-unset rounded-2xl`,
             filter: ".locked",
             disabled: !hasPermission("manageDashboard"),
+            fallbackOnBody: true,
             onMove(event) {
               return !event.related.classList.contains("locked");
             },

apps/web/src/views/dashboard/views/list/content-group-row.tsx

@@ -22,6 +22,7 @@ import {
   useSharedState
 } from "#context";
 import { MiniEditor } from "#components/fragments";
+import { breakpoints } from "#lib/utils";
 
 interface ContentGroupRowProps {
   contentGroup?: App.ContentGroup | null;
@@ -146,7 +147,8 @@ const ContentGroupRow: Component<ContentGroupRowProps> = (props) => {
             },
             delayOnTouchOnly: true,
             delay: 500,
-            disabled: !hasPermission("manageDashboard"),
+            fallbackOnBody: true,
+            disabled: !hasPermission("manageDashboard") || !breakpoints.md(),
             ghostClass: "!hidden",
             revertOnSpill: true,
             draggable: ".draggable",

apps/web/src/views/dashboard/views/list/content-piece-row.tsx

@@ -48,7 +48,7 @@ const ContentPieceRow: Component<ContentPieceRowProps> = (props) => {
               },
               delayOnTouchOnly: true,
               delay: 500,
-              disabled: !hasPermission("manageDashboard"),
+              disabled: !hasPermission("manageDashboard") || !breakpoints.md(),
               ghostClass: "!hidden",
               revertOnSpill: true,
               filter: ".locked",

packages/components/src/primitives/overlay.tsx

@@ -20,7 +20,8 @@ const Overlay: Component<OverlayProps> = (props) => {
     "class",
     "shadeClass",
     "portal",
-    "onOverlayClick"
+    "onOverlayClick",
+    "wrapperClass"
   ]);
 
   return (