various mobile ux fixes

components/dashboard/DashboardModal.module.css

@@ -38,7 +38,8 @@
 
 .sidebarTitle {
     font-size: 1.2rem;
-    padding: 0 24;
+    font-weight: 600;
+    padding: 0 24px;
     margin-bottom: 18px;
     color: var(--primary-text);
 }
@@ -69,14 +70,21 @@
     color: var(--secondary-text);
     margin-bottom: 5px;
     margin-top: 14px;
-    padding: 0 12;
+    padding: 0 12px;
     opacity: 0.6;
 }
 
 .navMenu {
     padding: 0 12px;
 }
 
+/* Bottom cluster (Sign in / Log out + About). Pinned to the bottom of the sidebar
+ * on desktop; on phone it gets a separator + gap so it reads as a distinct group
+ * set apart from the section list above. */
+.navMenuFooter {
+    margin-top: auto;
+}
+
 .navItem {
     display: flex;
     align-items: center;
@@ -196,14 +204,23 @@
     font-family: inherit;
 }
 
+/* Same look as the sections-list close (.sidebarClose) so the drawer's two close
+ * buttons don't differ (and matches the project sidebar + burger drawers). */
 .close_btn {
-    height: 22px;
-    width: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 10px;
+    background: none;
     color: var(--secondary-text);
     cursor: pointer;
 }
 
 .close_btn:hover {
+    background-color: var(--secondary-hover);
     color: var(--primary-text);
 }
 
@@ -251,19 +268,33 @@
     .sidebar {
         display: none;
         flex: 1;
-        padding: 8px 8px calc(16px + var(--safe-bottom));
+        padding: 8px calc(8px + var(--safe-right)) calc(16px + var(--safe-bottom)) 8px;
         border-right: none;
         overflow-y: auto;
+        /* On mobile the whole modal is one drawer, so the sections screen wears the
+         * same flat drawer background as the content screen (and the project menu +
+         * burger drawers) rather than the desktop two-tone sidebar colour. */
+        background: var(--main-bg);
     }
 
     .sidebarHeader {
         padding: 4px 12px 8px;
     }
 
+    /* Align the title with the section labels + item icons below. Their left edge is
+     * navMenu(12) + own padding(12); the header only carries 12, so the title needs
+     * its own 12 to reach the same line. */
     .sidebarTitle {
+        padding: 0 12px;
         margin-bottom: 0;
     }
 
+    .navMenuFooter {
+        margin-top: 24px;
+        padding-top: 12px;
+        border-top: 1px solid var(--separator);
+    }
+
     .sidebarClose {
         display: flex;
     }
@@ -278,7 +309,10 @@
 
     .content {
         flex: 1;
-        padding: 16px 12px calc(16px + var(--safe-bottom));
+        /* Symmetric horizontal padding + the right safe-area inset so the close
+         * button and settings panels (Keybinds, Layout, …) never crowd the screen
+         * edge. */
+        padding: 12px calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) 16px;
         /* Nudge inherited/em-based text down a touch for a denser, phone-friendly
          * scale; width-driven layouts reflow into the narrow drawer on their own. */
         font-size: 0.92rem;

components/dashboard/DashboardModal.tsx

@@ -29,6 +29,7 @@ const DashboardModal = () => {
         useContext(DashboardContext);
     const t = useTranslations("modal");
     const tSidebar = useTranslations("sidebar");
+    const tNav = useTranslations("navbar");
     const isPhone = useIsPhone();
 
     // Phone: the drawer shows one screen at a time — the sections list (nav
@@ -145,7 +146,13 @@ const DashboardModal = () => {
                             )}
                             <h3>{t(`tabs.${activeTab}` as Parameters<typeof t>[0])}</h3>
                         </div>
-                        <X className={styles.close_btn} onClick={closeDashboard} />
+                        <button
+                            className={styles.close_btn}
+                            onClick={closeDashboard}
+                            aria-label={tNav("close")}
+                        >
+                            <X size={18} />
+                        </button>
                     </header>
 
                     <div className={`${styles.scrollArea} ${isScrolled ? styles.scrolled : ""}`} onScroll={handleScroll}>

components/dashboard/DashboardSidebar.tsx

@@ -111,7 +111,7 @@ const SidebarMenu = ({ structure, activeTab, onTabChange }: SidebarMenuProps) =>
                         </div>
                     ))}
                 </nav>
-                <div className={styles.navMenu} style={{ marginTop: "auto" }}>
+                <div className={`${styles.navMenu} ${styles.navMenuFooter}`}>
                     {/* While the user query is in flight, leave the slot empty rather than
                         rendering a "Sign in" button against an unknown auth state — clicking
                         it during loading races the SWR resolution and ends up on Profile. */}

components/dashboard/project/DangerZone.tsx

@@ -2,7 +2,7 @@
 
 import { deleteProject } from "@src/lib/utils/requests";
 import { useProjectMembership } from "@src/lib/utils/hooks";
-import { redirectHome } from "@src/lib/utils/redirects";
+import { useAppNavigation } from "@src/lib/utils/navigation";
 import { useContext, useState } from "react";
 import { DashboardContext } from "@src/context/DashboardContext";
 import { Trash2 } from "lucide-react";
@@ -21,6 +21,7 @@ interface DangerZoneProps {
 const DangerZone = ({ projectId, isLocalOnly, isOpen }: DangerZoneProps) => {
     const { membership } = useProjectMembership();
     const { closeDashboard } = useContext(DashboardContext);
+    const { goToProjects } = useAppNavigation();
     const [showDeleteDialog, setShowDeleteDialog] = useState(false);
     const [loading, setLoading] = useState(false);
     const t = useTranslations("dangerZone");
@@ -35,7 +36,7 @@ const DangerZone = ({ projectId, isLocalOnly, isOpen }: DangerZoneProps) => {
                 const { deleteCachedProject } = await import("@src/lib/persistence/storage-provider/local-persistence");
                 await deleteCachedProject(projectId);
                 closeDashboard();
-                redirectHome();
+                goToProjects();
             } else if (membership) {
                 const res = await deleteProject(membership.project.id);
                 if (res.ok) {
@@ -44,7 +45,7 @@ const DangerZone = ({ projectId, isLocalOnly, isOpen }: DangerZoneProps) => {
                         await import("@src/lib/persistence/storage-provider/local-persistence");
                     await deleteCachedProject(projectId);
                     closeDashboard();
-                    redirectHome();
+                    goToProjects();
                 }
             }
         } finally {

components/dashboard/project/LayoutSettings.module.css

@@ -282,6 +282,19 @@
         gap: 12px;
     }
 
+    /* Header/footer: keep the three alignment inputs (left / middle / right) on one
+     * row even in the narrow drawer — stacking them into a column loses the
+     * left/center/right meaning. min-width:0 lets the inputs shrink to share the
+     * width instead of overflowing off-screen. */
+    .hfGroup .labelRow {
+        flex-direction: row;
+        gap: 8px;
+    }
+
+    .hfGroup .labelRow > div {
+        min-width: 0;
+    }
+
     .hfGroup {
         grid-template-columns: 1fr;
         row-gap: 8px;

components/editor/MobileFormatToolbar.module.css

@@ -24,7 +24,9 @@
 
     background-color: var(--secondary);
     border: 1px solid var(--separator);
-    border-radius: 18px;
+    /* Fully rounded ends — the bar reads as a floating pill above the keyboard.
+     * ~half the bar height (40px controls + 6px padding) gives clean pill caps. */
+    border-radius: 26px;
     box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
 
     user-select: none;
@@ -34,6 +36,16 @@
     -webkit-tap-highlight-color: transparent;
 }
 
+/* Transparent full-screen shield raised for a beat after an element pick. Sits
+ * under the toolbar (z 60) but over everything else, so the tap iOS synthesizes
+ * at touch-end lands here — never on the editor, where it would move the caret. */
+.tap_guard {
+    position: fixed;
+    inset: 0;
+    z-index: 59;
+    background: transparent;
+}
+
 .group {
     display: flex;
     flex-direction: row;