From e7cf834325e8686613fbbee78d52213cb3ba98b1 Mon Sep 17 00:00:00 2001
From: Paul Nothaft <paul@MacStudio-von-Paul.local>
Date: Sun, 31 May 2026 22:35:07 +0200
Subject: [PATCH] fix(admin-header): truncate long company names on narrow
 widths (#523 regression)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#527 hid the language *name* on <sm to free space for the title.
Since then the right cluster gained dark-mode toggle, notifications,
and the user avatar, and the brand block still had no truncation —
so a long branding_company_name would still push past the available
width into the action buttons on phones.

Defensive fix: min-w-0 on the brand-block wrapper, truncate on the
company-name span, flex-shrink-0 on the logo image. Long names now
ellipsis within the left cluster regardless of how many widgets
fill the right.
---
 frontend/src/components/admin/AdminHeader.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/admin/AdminHeader.tsx b/frontend/src/components/admin/AdminHeader.tsx
index 7217f825..6e9372d0 100644
--- a/frontend/src/components/admin/AdminHeader.tsx
+++ b/frontend/src/components/admin/AdminHeader.tsx
@@ -49,12 +49,15 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
   // Re-used in left / center / right slots below so all three positions
   // produce visually identical brand chrome.
   const renderBrandBlock = () => (
-    <div className="flex items-center gap-2">
+    // min-w-0 + truncate on the name span so long company names shrink
+    // within the left cluster instead of pushing into the right-side
+    // action buttons on narrow mobile widths (#523 regression).
+    <div className="flex items-center gap-2 min-w-0">
       {!logoInSidebar && (logoDisplayMode === 'logo_only' || logoDisplayMode === 'logo_and_text') && (
-        <img src={resolvedLogoUrl} alt={companyName} className="h-8 w-auto object-contain" />
+        <img src={resolvedLogoUrl} alt={companyName} className="h-8 w-auto object-contain flex-shrink-0" />
       )}
       {(logoDisplayMode === 'text_only' || logoDisplayMode === 'logo_and_text') && (
-        <span className="text-xl sm:text-2xl" style={{ fontFamily: 'Poppins, sans-serif', fontWeight: 600, color: '#145346' }}>{companyName}</span>
+        <span className="text-xl sm:text-2xl truncate" style={{ fontFamily: 'Poppins, sans-serif', fontWeight: 600, color: '#145346' }}>{companyName}</span>
       )}
     </div>
   );