fix(ui): stop the version badge overlapping the panel name in the header

On a narrow desktop the header row squeezed the brand box below its content width.
The wordmark had no way to give ground — no min-w-0, no truncate — so instead of
shrinking it overflowed its box and rendered underneath the version badge next to it.

The fix is in the logo: the name now ellipses (min-w-0 + truncate) while the mark
itself stays fixed. Pinning the brand with shrink-0 would also have stopped the
overlap, but only by pushing the row wider than the viewport and giving the whole
page a horizontal scrollbar.

The version badge is decorative, so it's the first thing to go when space is tight:
hidden below lg, which keeps the panel name whole rather than truncating it to make
room for a badge. The nav gets min-w-0 too — a flex item's default min-width:auto
floors it at its content width, so its overflow-x-auto never actually engaged.

Author: AppsGanin

web/src/Dashboard.tsx

@@ -89,7 +89,12 @@ export function Dashboard({
       {/* White sticky top bar. */}
       <header className="sticky top-0 z-100 border-b border-brand-600/10 bg-white shadow-sm">
         <div className="mx-auto flex h-16 max-w-6xl items-center justify-between gap-3 px-3 sm:px-4">
-          <div className="flex gap-2 items-center">
+          {/* min-w-0 lets this box shrink so the row never overflows the viewport;
+              BrandLogo ellipses instead of spilling over the badge next to it. The
+              badge is decorative, so it's the first thing to go when space is tight —
+              below lg the nav needs every pixel, and hiding it keeps the panel name
+              whole instead of truncating it to make room. */}
+          <div className="flex min-w-0 gap-2 items-center">
             <button
               className="text-gray-600 md:hidden"
               onClick={() => setMenuOpen(true)}
@@ -99,15 +104,17 @@ export function Dashboard({
             </button>
             <BrandLogo size={26} />
             {version && (
-              <span className="rounded-full self-start accent-tint px-2 py-0.5 text-xs font-medium text-ink-muted sm:inline">
+              <span className="hidden shrink-0 whitespace-nowrap rounded-full self-start accent-tint px-2 py-0.5 text-xs font-medium text-ink-muted lg:inline">
                 v{version}
               </span>
             )}
           </div>
 
-          {/* Desktop nav + account. */}
-          <div className="hidden items-center gap-8 md:flex">
-            <nav className="no-scrollbar flex items-center gap-7 overflow-x-auto">
+          {/* Desktop nav + account. min-w-0 is what lets the nav actually shrink —
+              a flex item's default min-width:auto floors it at its content width, so
+              overflow-x-auto on the nav would never engage without it. */}
+          <div className="hidden min-w-0 items-center gap-8 md:flex">
+            <nav className="no-scrollbar flex min-w-0 items-center gap-7 overflow-x-auto">
               {NAV.map((n) => (
                 <button
                   key={n.value}

web/src/Logo.tsx

@@ -11,28 +11,24 @@ export function BrandLogo({ size = 30 }: { size?: number }) {
   const imgSize = `${(size + 6) / 16}rem`
   const src = brand.has_custom_logo ? brand.logoURL : logoUrl
 
+  // min-w-0 + truncate: in a cramped flex row (the desktop header) the wordmark must
+  // give way by ellipsing, not by overflowing its box — an overflowing wordmark used
+  // to render underneath the version badge sitting next to it. The mark itself never
+  // shrinks, so it can't be squashed out of proportion.
   return (
-    <span className="inline-flex items-center gap-2.5">
+    <span className="inline-flex min-w-0 items-center gap-2.5">
       <img
         src={src}
+        className="shrink-0"
         style={{ width: imgSize, height: imgSize, objectFit: 'contain' }}
         alt=""
       />
-      {isDefault ? (
-        <span
-          className="font-extrabold leading-none tracking-tight text-accent"
-          style={{ fontSize: `${(size * 0.72) / 16}rem` }}
-        >
-          РосПанель
-        </span>
-      ) : (
-        <span
-          className="font-extrabold leading-none tracking-tight text-accent"
-          style={{ fontSize: `${(size * 0.72) / 16}rem` }}
-        >
-          {brand.panel_name}
-        </span>
-      )}
+      <span
+        className="min-w-0 truncate font-extrabold leading-none tracking-tight text-accent"
+        style={{ fontSize: `${(size * 0.72) / 16}rem` }}
+      >
+        {isDefault ? 'РосПанель' : brand.panel_name}
+      </span>
     </span>
   )
 }