fix(ui): адаптировать шапку страницы к узким экранам

components/page-header.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import type { ReactNode } from "react"
+import { Fragment, type ReactNode } from "react"
 import { Separator } from "@/components/ui/separator"
 import { SidebarTrigger } from "@/components/ui/sidebar"
 import {
@@ -27,31 +27,33 @@ interface PageHeaderProps {
 /** Header chrome — AppsMenu + SystemMonitor; theme in NavUser. @see https://reui.io/preview/base/app-shell-12 */
 export function PageHeader({ crumbs, actions }: PageHeaderProps) {
   return (
-    <header className="bg-background sticky top-0 z-10 flex h-12 shrink-0 items-center gap-2 border-b px-4 md:px-6">
+    <header className="bg-background sticky top-0 z-10 flex min-h-12 shrink-0 flex-wrap items-center gap-2 border-b px-4 py-1.5 md:px-6">
       <SidebarTrigger className="-ml-1" />
       <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
-      <Breadcrumb>
-        <BreadcrumbList>
+      <Breadcrumb aria-label="Путь страницы" className="min-w-0 flex-1">
+        <BreadcrumbList className="flex-nowrap">
           {crumbs.map((crumb, i) => (
-            <span key={i} className="flex items-center gap-1.5">
-              {i > 0 && <BreadcrumbSeparator />}
-              <BreadcrumbItem>
+            <Fragment key={i}>
+              {i > 0 && <BreadcrumbSeparator className="hidden shrink-0 sm:block" />}
+              <BreadcrumbItem className={i < crumbs.length - 1 ? "hidden shrink-0 sm:inline-flex" : "min-w-0"}>
                 {i < crumbs.length - 1 && crumb.href ? (
                   <BreadcrumbLink href={crumb.href}>{crumb.label}</BreadcrumbLink>
                 ) : i < crumbs.length - 1 ? (
                   <span className="text-muted-foreground text-sm">{crumb.label}</span>
                 ) : (
-                  <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+                  <BreadcrumbPage className="wrap-anywhere">{crumb.label}</BreadcrumbPage>
                 )}
               </BreadcrumbItem>
-            </span>
+            </Fragment>
           ))}
         </BreadcrumbList>
       </Breadcrumb>
-      <div className="ml-auto flex items-center gap-2">
-        {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
-        <AppsMenu />
-        <SystemMonitorPopover />
+      <div className={`ml-auto flex max-w-full items-center gap-2 ${actions ? "w-full xl:w-auto" : "shrink-0"}`}>
+        {actions ? <div role="group" aria-label="Действия страницы" className="flex min-w-0 flex-1 flex-wrap items-center gap-2">{actions}</div> : null}
+        <div className="ml-auto flex shrink-0 items-center gap-2">
+          <AppsMenu />
+          <SystemMonitorPopover />
+        </div>
       </div>
     </header>
   )