diff --git a/libs/ui/src/lib/layout/AppSidebar.tsx b/libs/ui/src/lib/layout/AppSidebar.tsx
index de1fdfcaf..5fe8f83f0 100644
--- a/libs/ui/src/lib/layout/AppSidebar.tsx
+++ b/libs/ui/src/lib/layout/AppSidebar.tsx
@@ -14,6 +14,7 @@ import {
   rem,
   useMantineColorScheme,
 } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import {
   IconChevronLeft,
   IconChevronRight,
@@ -275,7 +276,7 @@ interface AppSidebarProps {
 
 export function AppSidebar({
   navItems,
-  collapsed,
+  collapsed: collapsedProp,
   activePath,
   onToggleCollapse,
   onNavigate,
@@ -285,6 +286,12 @@ export function AppSidebar({
 }: AppSidebarProps) {
   const { t } = useTranslation();
   const { colorScheme } = useMantineColorScheme();
+  // The icon-rail toggle is a desktop-only affordance (its button is
+  // `visibleFrom="sm"`) — on mobile the sidebar renders in a full-width
+  // drawer, so a `collapsed` state carried over from a prior desktop session
+  // would otherwise show icon-only with no way back. Mobile always expands.
+  const isMobile = useMediaQuery('(max-width: 48em)');
+  const collapsed = collapsedProp && !isMobile;
   const hoverBg = colorScheme === 'dark'
     ? 'var(--mantine-color-dark-6)'
     : 'var(--mantine-color-gray-0)';