UI Fixes

apps/backoffice/src/app/layouts/BackofficeLayout.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { AppShell } from '@mantine/core';
+import { AppShell, Drawer } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -31,7 +31,7 @@ export function BackofficeLayout() {
   const navigate = useNavigate();
   const location = useLocation();
   const dispatch = useAppDispatch();
-  const [opened, { toggle: toggleNav }] = useDisclosure();
+  const [opened, { toggle: toggleNav, close: closeNav }] = useDisclosure();
   const [collapsed, setCollapsed] = useState(false);
   const user = useAppSelector((state) => state.auth.user);
   const layoutMode = useAppSelector((state) => state.preferences.layoutMode);
@@ -141,7 +141,10 @@ export function BackofficeLayout() {
           ? {
               width: collapsed ? 72 : 264,
               breakpoint: "sm",
-              collapsed: { mobile: !opened },
+              // Mobile has its own Drawer below — AppShell's built-in mobile
+              // navbar takes over the full viewport width, which felt like
+              // it swallowed the page. Always collapsed here on mobile.
+              collapsed: { mobile: true },
             }
           : undefined
       }
@@ -222,6 +225,34 @@ export function BackofficeLayout() {
 
       {/* Registered once for the whole backoffice; opens on ⌘K anywhere. */}
       <CommandPalette sections={sections} />
+
+      {/* Mobile nav: a proper Drawer (sized, backdrop, closes on outside
+          click) instead of AppShell's full-width mobile navbar. Mirrors the
+          landing page's mobile menu. */}
+      {isSidebar && (
+        <Drawer
+          opened={opened}
+          onClose={closeNav}
+          hiddenFrom="sm"
+          size="75%"
+          padding={0}
+          withCloseButton={false}
+        >
+          <AppSidebar
+            navItems={sections}
+            collapsed={false}
+            activePath={location.pathname}
+            onToggleCollapse={handleToggleCollapse}
+            onNavigate={(item) => {
+              go(item);
+              closeNav();
+            }}
+            brandName={t('app.name')}
+            brandSubtitle={t('app.authority')}
+            brandLogo={<BrandMark size={32} />}
+          />
+        </Drawer>
+      )}
     </AppShell>
   );
 }

apps/portal/src/app/layouts/PortalLayout.tsx

@@ -1,4 +1,4 @@
-import { AppShell } from "@mantine/core";
+import { AppShell, Drawer } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import {
   IconArrowsExchange,
@@ -281,7 +281,10 @@ export function PortalLayout() {
       navbar={{
         width: sidebarCollapsed ? 72 : 264,
         breakpoint: "sm",
-        collapsed: { mobile: !navOpened },
+        // Mobile has its own Drawer below — AppShell's built-in mobile
+        // navbar takes over the full viewport width, which felt like it
+        // swallowed the page. Always collapsed here on mobile.
+        collapsed: { mobile: true },
       }}
       padding="lg"
     >
@@ -332,6 +335,29 @@ export function PortalLayout() {
           <Outlet />
         </div>
       </AppShell.Main>
+
+      {/* Mobile nav: a proper Drawer (sized, backdrop, closes on outside
+          click) instead of AppShell's full-width mobile navbar. Mirrors the
+          landing page's mobile menu. */}
+      <Drawer
+        opened={navOpened}
+        onClose={closeNav}
+        hiddenFrom="sm"
+        size="75%"
+        padding={0}
+        withCloseButton={false}
+      >
+        <AppSidebar
+          navItems={sections}
+          collapsed={false}
+          activePath={location.pathname}
+          onToggleCollapse={toggleSidebar}
+          onNavigate={go}
+          brandName={t("app.name")}
+          brandSubtitle={t("app.authority")}
+          brandLogo={<BrandMark size={32} />}
+        />
+      </Drawer>
     </AppShell>
   );
 }