refactor(frontend): split breadcrumb path between header and sidebar

On desktop (lg+), render the breadcrumb in the header above the title
as before. On mobile/tablet (below lg), render it in the sidebar drawer
below the logo so the header stays compact (title only, no path).

- Header: gate breadcrumb on lg+, allow title to wrap (no truncation)
- Sidebar: gate breadcrumb on lg:hidden, auto-expand the active
  section's parent group so the highlighted nav item is always visible
- Breadcrumbs: wrap naturally, full text, no truncation or ellipsis

Author: constLiakos

frontend/src/components/layout/Header.tsx

@@ -175,12 +175,14 @@ function Header() {
             )}
             <div className="flex flex-col min-w-0">
               {pageHeaderConfig?.breadcrumbs && (
-                <Breadcrumbs 
-                  items={pageHeaderConfig.breadcrumbs} 
-                  currentLabel={pageHeaderConfig.title}
-                />
+                <div className="hidden lg:block">
+                  <Breadcrumbs 
+                    items={pageHeaderConfig.breadcrumbs} 
+                    currentLabel={pageHeaderConfig.title}
+                  />
+                </div>
               )}
-              <h1 className="text-base md:text-lg font-black text-brand-navy dark:text-dark-text tracking-tight leading-tight sm:leading-none sm:truncate break-words">
+              <h1 className="text-sm sm:text-base md:text-lg font-black text-brand-navy dark:text-dark-text tracking-tight leading-tight sm:leading-none break-words">
                 {getPageTitle()}
               </h1>
               {pageHeaderConfig?.subtitle && (

frontend/src/components/layout/Sidebar.tsx

@@ -20,6 +20,7 @@ import { useIsTablet } from '../../hooks/useMediaQuery';
 import { useState, useMemo, useRef, Fragment, useEffect } from 'react';
 import AppVersion from '../ui/AppVersion';
 import CreateMenu from '../ui/CreateMenu';
+import { Breadcrumbs } from '../ui/Breadcrumbs';
 
 interface SubItem {
   path: string;
@@ -56,6 +57,7 @@ function Sidebar() {
   const { currentPatient } = usePatientStore();
   const user = useAuthStore(state => state.user);
   const theme = useSettingsStore(state => state.theme);
+  const pageHeaderConfig = useUIStore(state => state.pageHeaderConfig);
   const [expandedItems, setExpandedItems] = useState<string[]>(['/patient-record']);
   const [hoveredMenu, setHoveredMenu] = useState<{ path: string; rect: DOMRect, items?: SubItem[], labelKey: string } | null>(null);
   const [isHovered, setIsHovered] = useState(false);
@@ -200,6 +202,21 @@ function Sidebar() {
     );
   };
 
+  // Auto-expand the parent group of the active sub-item so the highlighted
+  // navigation entry is always visible without manual toggling.
+  useEffect(() => {
+    setExpandedItems(prev => {
+      const next = [...prev];
+      for (const item of menuItems) {
+        if (item.subItems && item.subItems.some(isSubActive) && !next.includes(item.path)) {
+          next.push(item.path);
+        }
+      }
+      return next;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname, location.search, menuItems]);
+
   const filteredMenuItems = useMemo(() => {
     return menuItems.filter(item => {
       if (item.roles && user && !item.roles.includes(user.role)) return false;
@@ -257,6 +274,18 @@ function Sidebar() {
         </Link>
       </div>
 
+      {/* Current page breadcrumb path — mobile/tablet only. On desktop (lg+)
+          the path renders in the header bar instead. Shown only when the
+          sidebar drawer is open; hidden in icon-only collapsed mode. */}
+      {!effectiveCollapsed && pageHeaderConfig?.breadcrumbs && pageHeaderConfig.breadcrumbs.length > 0 && (
+        <div className="lg:hidden px-6 pb-3 -mt-1 mb-1 border-b border-gray-50 dark:border-white/5">
+          <Breadcrumbs
+            items={pageHeaderConfig.breadcrumbs}
+            currentLabel={pageHeaderConfig.title}
+          />
+        </div>
+      )}
+
       {/* Invisible hover bridge — keeps the handle visible when the cursor is near the sidebar edge */}
       <div className="hidden lg:block absolute inset-y-0 left-full w-5 z-[955]" aria-hidden="true" />
 

frontend/src/components/ui/Breadcrumbs.tsx

@@ -19,27 +19,34 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items = [], currentLab
   if (items.length === 0 && !currentLabel) return null;
 
   return (
-    <nav className={clsx("flex flex-wrap items-center gap-x-1.5 gap-y-0.5 mb-1", className)} aria-label="Breadcrumb">
-      <Link 
-        to="/" 
-        className="text-gray-400 hover:text-blue-500 transition-colors p-0.5 shrink-0"
+    <nav
+      className={clsx(
+        "flex flex-wrap items-center gap-x-1.5 gap-y-0.5 leading-tight",
+        className
+      )}
+      aria-label="Breadcrumb"
+    >
+      <Link
+        to="/"
+        className="text-gray-400 hover:text-blue-500 dark:text-dark-muted dark:hover:text-blue-400 transition-colors p-0.5 shrink-0"
         title="Home"
+        aria-label="Home"
       >
         <Home className="w-3 h-3" />
       </Link>
-      
+
       {items.map((item, index) => (
         <React.Fragment key={index}>
           <ChevronRight className="w-2.5 h-2.5 text-gray-300 dark:text-dark-muted shrink-0" />
           {item.path ? (
             <Link
               to={item.path}
-              className="text-[10px] font-bold text-gray-400 hover:text-blue-500 transition-colors uppercase tracking-wider whitespace-nowrap"
+              className="text-[10px] font-bold text-gray-400 hover:text-blue-500 dark:text-dark-muted dark:hover:text-blue-400 transition-colors uppercase tracking-wider"
             >
               {item.label}
             </Link>
           ) : (
-            <span className="text-[10px] font-bold text-gray-400 uppercase tracking-wider whitespace-nowrap">
+            <span className="text-[10px] font-bold text-gray-400 dark:text-dark-muted uppercase tracking-wider">
               {item.label}
             </span>
           )}
@@ -49,7 +56,7 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items = [], currentLab
       {currentLabel && (
         <>
           <ChevronRight className="w-2.5 h-2.5 text-gray-300 dark:text-dark-muted shrink-0" />
-          <span className="text-[10px] font-black text-brand-navy dark:text-dark-text uppercase tracking-wider min-w-0 break-words">
+          <span className="text-[10px] font-black text-brand-navy dark:text-dark-text uppercase tracking-wider">
             {currentLabel}
           </span>
         </>