From c246fd3cc89962d626218029ab3da1346a726246 Mon Sep 17 00:00:00 2001
From: Paul Nothaft <paul@MacStudio-von-Paul.local>
Date: Sun, 31 May 2026 23:07:19 +0200
Subject: [PATCH] fix(admin-header): hide wordmark on <sm when logo also shows
 (#523)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rekoo-PS's v3.59.0-beta.0 screenshot showed a different shape than
the truncate fix in e7cf834 addressed. Their company name ("Arkan
Studio") isn't unusually long, but with logo_and_text display mode
on a phone-width viewport the wordmark wrapped to two lines and the
LanguageSelector button — sitting in the right action cluster —
landed visually on top of the wrapped second line.

Truncate alone left "Arkan Studio" rendered as "Ar..." after the
logo image. Functional but ugly, and on accounts where the wordmark
reaches the right cluster the visual overlap returns. Match what
LanguageSelector does for its language name in #527: hide the
wordmark on <sm when a logo is also showing (the logo carries the
identity), keep it on sm+. text_only mode is unchanged — wordmark
shows on every width, otherwise nothing would render.

Truncate stays in place as defensive depth for the text_only path.
---
 frontend/src/components/admin/AdminHeader.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/admin/AdminHeader.tsx b/frontend/src/components/admin/AdminHeader.tsx
index 6e9372d0..ff3efaaa 100644
--- a/frontend/src/components/admin/AdminHeader.tsx
+++ b/frontend/src/components/admin/AdminHeader.tsx
@@ -48,16 +48,27 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
   // Renders the logo + wordmark block per the current logo_display_mode.
   // Re-used in left / center / right slots below so all three positions
   // produce visually identical brand chrome.
+  const showLogo = !logoInSidebar && (logoDisplayMode === 'logo_only' || logoDisplayMode === 'logo_and_text');
+  const showText = logoDisplayMode === 'text_only' || logoDisplayMode === 'logo_and_text';
+  // On <sm the wordmark hides when the logo carries the brand identity
+  // (logo_and_text). Same pattern LanguageSelector uses for its language
+  // name (#527). Without this, even with truncate, a phone-width admin
+  // shows things like "Ar..." after the logo image — readable but ugly,
+  // and on accounts whose company name lets the text reach the right
+  // cluster it overlaps the LanguageSelector button (#523 follow-up,
+  // Rekoo-PS's "Arkan Studio" screenshot in v3.59.0-beta.0). text_only
+  // mode keeps the wordmark on every width — nothing else would render.
+  const wordmarkVisibilityClass = showLogo ? 'hidden sm:inline' : 'inline';
   const renderBrandBlock = () => (
     // 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') && (
+      {showLogo && (
         <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 truncate" style={{ fontFamily: 'Poppins, sans-serif', fontWeight: 600, color: '#145346' }}>{companyName}</span>
+      {showText && (
+        <span className={`${wordmarkVisibilityClass} text-xl sm:text-2xl truncate`} style={{ fontFamily: 'Poppins, sans-serif', fontWeight: 600, color: '#145346' }}>{companyName}</span>
       )}
     </div>
   );