UI fixes

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

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { AppShell, Drawer } from '@mantine/core';
+import { AppShell, Box, Drawer, Group, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -26,6 +26,14 @@ const BADGE_POLL_MS = 60_000;
 
 const HEADER_HEIGHT = 116;
 
+/**
+ * Horizontal inset of the header chrome. `AppHeader` adds its own `px="lg"`
+ * inside this, so the nav strip below needs the sum to line up with the
+ * controls above it — it used to start 20px to their left.
+ */
+const CHROME_PAD_X = 32;
+const NAV_STRIP_PAD_X = CHROME_PAD_X + 20;
+
 /**
  * A desk left unlocked with a license-review or medical-record screen open is
  * the actual threat model here, not a slow token. 15 minutes of no mouse,
@@ -144,7 +152,9 @@ export function BackofficeLayout() {
 
   return (
     <AppShell
-      header={{ height: isSidebar ? 74 : HEADER_HEIGHT }}
+      // The top layout drops its nav strip on small screens — the drawer is
+      // the nav there — so the header shrinks back to a single row with it.
+      header={{ height: isSidebar ? 74 : { base: 74, sm: HEADER_HEIGHT } }}
       navbar={
         isSidebar
           ? {
@@ -162,13 +172,28 @@ export function BackofficeLayout() {
       <AppShell.Header
         style={{
           background: "var(--mantine-color-body)",
-          borderBottom: "1px solid var(--mantine-color-gray-2)",
+          borderBottom: "1px solid var(--mantine-color-default-border)",
           display: "flex",
           flexDirection: "column",
         }}
       >
-        <div style={{ height: 74, flexShrink: 0, padding: "0 32px" }}>
+        <div
+          style={{ height: 74, flexShrink: 0, padding: `0 ${CHROME_PAD_X}px` }}
+        >
           <AppHeader
+            brand={
+              isSidebar ? undefined : (
+                <Group gap="xs" wrap="nowrap">
+                  <BrandMark size={28} />
+                  <Text fw={700} size="sm" lh={1.1} visibleFrom="xs">
+                    {t('app.name')}
+                  </Text>
+                </Group>
+              )
+            }
+            // Nothing to toggle on a desktop top bar; on mobile it opens the
+            // drawer below.
+            burgerHiddenFrom={isSidebar ? undefined : 'sm'}
             onToggleNav={toggleNav}
             onToggleSidebar={isSidebar ? handleToggleCollapse : toggleNav}
             navOpened={opened}
@@ -182,13 +207,14 @@ export function BackofficeLayout() {
         </div>
 
         {!isSidebar && (
-          <div
+          <Box
+            visibleFrom="sm"
             style={{
               display: 'flex',
               alignItems: 'center',
-              padding: '0 32px',
+              padding: `0 ${NAV_STRIP_PAD_X}px`,
               height: 42,
-              borderTop: '1px solid var(--mantine-color-gray-1)',
+              borderTop: '1px solid var(--mantine-color-default-border)',
               flexShrink: 0,
             }}
           >
@@ -199,7 +225,7 @@ export function BackofficeLayout() {
               activePath={location.pathname}
               onNavigate={go}
             />
-          </div>
+          </Box>
         )}
       </AppShell.Header>
 
@@ -210,7 +236,7 @@ export function BackofficeLayout() {
             overflow: "hidden",
             transition: "width 200ms ease",
             background: "var(--mantine-color-body)",
-            borderRight: "1px solid var(--mantine-color-gray-2)",
+            borderRight: "1px solid var(--mantine-color-default-border)",
           }}
         >
           <AppSidebar
@@ -238,7 +264,6 @@ export function BackofficeLayout() {
       {/* 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}
@@ -261,7 +286,6 @@ export function BackofficeLayout() {
           brandLogo={<BrandMark size={32} />}
         />
       </Drawer>
-      )}
     </AppShell>
   );
 }

libs/ui/src/lib/layout/AppHeader.tsx

@@ -14,6 +14,7 @@ import {
   IconLogout,
   IconUserCircle,
 } from '@tabler/icons-react';
+import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LanguageSwitcher } from './LanguageSwitcher';
 import { ColorSchemeToggle } from './ColorSchemeToggle';
@@ -36,6 +37,17 @@ interface AppHeaderProps {
   supportedLanguages: readonly string[];
   onNotificationsClick?: () => void;
   notificationCount?: number;
+  /**
+   * Rendered at the far left. The sidebar layout carries the brand in the
+   * sidebar itself; the top-bar layout has no sidebar, so it passes the brand
+   * here rather than leaving the chrome unbranded.
+   */
+  brand?: ReactNode;
+  /**
+   * Breakpoint from which the burger is hidden. The top-bar layout only needs
+   * it on small screens, where the drawer replaces the nav strip.
+   */
+  burgerHiddenFrom?: string;
 }
 
 export function AppHeader({
@@ -50,17 +62,21 @@ export function AppHeader({
   supportedLanguages,
   onNotificationsClick,
   notificationCount,
+  brand,
+  burgerHiddenFrom,
 }: AppHeaderProps) {
   const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
 
   return (
     <Group h="100%" px="lg" justify="space-between" wrap="nowrap">
       <Group gap="md" wrap="nowrap">
+        {brand}
         {/* Hamburger — styled like user-management Top.tsx */}
         {/* The Burger itself owns the click so the control is a real, keyboard
             reachable <button>; the Box is chrome only. It previously wrapped a
             no-op button, which no keyboard user could operate. */}
         <Box
+          hiddenFrom={burgerHiddenFrom}
           style={{
             display: 'flex',
             alignItems: 'center',

libs/ui/src/lib/layout/AppTopNav.tsx

@@ -1,4 +1,5 @@
 import { Badge, Group, Menu, UnstyledButton, rem } from '@mantine/core';
+import { forwardRef } from 'react';
 import { IconChevronDown } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
 import type { NavItem } from './AppSidebar';
@@ -23,7 +24,9 @@ interface AppTopNavProps {
  * scrolling strip, so with twenty-odd of them most were off-screen and the
  * grouping that the sidebar already had was thrown away. Here each section
  * collapses to a single labelled dropdown, which fits and keeps the same
- * information architecture as the sidebar.
+ * information architecture as the sidebar. Sections that still do not fit
+ * scroll horizontally rather than dropping off the edge — under ~1100px the
+ * last one or two were simply unreachable.
  */
 export function AppTopNav({ navItems, activePath, onNavigate }: AppTopNavProps) {
   const { t } = useTranslation();
@@ -36,6 +39,7 @@ export function AppTopNav({ navItems, activePath, onNavigate }: AppTopNavProps)
       wrap="nowrap"
       role="navigation"
       aria-label={t('nav.primary', 'Primary')}
+      style={{ flex: 1, minWidth: 0, overflowX: 'auto', scrollbarWidth: 'none' }}
     >
       {sections.map((section, index) => {
         // An unlabelled leading block (Dashboard) is a plain link, not a menu.
@@ -148,26 +152,37 @@ interface TopNavButtonProps {
   onClick?: () => void;
 }
 
-function TopNavButton({
-  label,
-  active,
-  badge,
-  soon,
-  withChevron,
-  onClick,
-}: TopNavButtonProps) {
+/**
+ * `Menu.Target` positions its dropdown against the ref it passes to its child,
+ * so a plain function component here left every section menu anchored at the
+ * top-left of the viewport, covering the header instead of opening under the
+ * button that was clicked. The rest props carry Menu's own click and aria
+ * handling onto the real button.
+ */
+const TopNavButton = forwardRef<HTMLButtonElement, TopNavButtonProps>(
+  function TopNavButton(
+    { label, active, badge, soon, withChevron, onClick, ...others },
+    ref,
+  ) {
     return (
       <UnstyledButton
+        ref={ref}
         onClick={onClick}
+        {...others}
         style={{
           display: 'flex',
           alignItems: 'center',
           gap: rem(6),
           padding: `0 ${rem(14)}`,
           height: '100%',
+          flexShrink: 0,
           borderBottom: '2px solid',
-        borderBottomColor: active ? 'var(--mantine-color-blue-6)' : 'transparent',
-        color: active ? 'var(--mantine-color-blue-6)' : 'var(--mantine-color-gray-6)',
+          borderBottomColor: active
+            ? 'var(--mantine-color-blue-6)'
+            : 'transparent',
+          color: active
+            ? 'var(--mantine-color-blue-6)'
+            : 'var(--mantine-color-gray-6)',
           fontWeight: active ? 600 : 500,
           fontSize: rem(14),
           whiteSpace: 'nowrap',
@@ -184,4 +199,5 @@ function TopNavButton({
         {withChevron && <IconChevronDown size={14} stroke={2} />}
       </UnstyledButton>
     );
-}
+  },
+);