From 4b4ecfdf7143c8f353355ecd6d5ee14bbf50c9bb Mon Sep 17 00:00:00 2001
From: Paul Nothaft <paul@MacStudio-von-Paul.local>
Date: Mon, 18 May 2026 23:19:42 +0200
Subject: [PATCH] fix(header): hide language name on mobile to free the title
 (#523)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@Rekoo-PS reported the LanguageSelector pushing into the company-name
title on narrow viewports — the button always rendered
Globe + flag + full language name (~120px), and on mobile that pinched
the left-side title cluster in AdminHeader.

Wrap the name in `hidden sm:inline` so <sm the button collapses to
just Globe + flag, matching the existing "hidden xl:block" pattern
on the date display in the same header. Self-explanatory at icon-only
width (users see their current flag and a globe), and the dropdown
still shows full names when opened. Title/aria-label keep the name
discoverable for screen readers + tooltip hover on the icon-only state.

Refs: #523
---
 frontend/src/components/common/LanguageSelector.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/common/LanguageSelector.tsx b/frontend/src/components/common/LanguageSelector.tsx
index bb587e75..89b07289 100644
--- a/frontend/src/components/common/LanguageSelector.tsx
+++ b/frontend/src/components/common/LanguageSelector.tsx
@@ -87,11 +87,17 @@ export const LanguageSelector: React.FC = () => {
     <div className="relative">
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary-500"
+        className="flex items-center gap-2 px-2 sm:px-3 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary-500"
+        // On <sm the language *name* is hidden — the Globe + flag pair
+        // is enough recognition on its own and stops this control from
+        // pushing into the company-name title on narrow mobile widths
+        // (#523). Full name stays on sm+ where there's room.
+        aria-label={currentLanguage.name}
+        title={currentLanguage.name}
       >
         <Globe className="w-4 h-4" />
         <currentLanguage.Flag className="w-5 h-5" />
-        <span>{currentLanguage.name}</span>
+        <span className="hidden sm:inline">{currentLanguage.name}</span>
       </button>
 
       {isOpen && (