fix(header): hide language name on mobile to free the title (#523)

@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
This commit is contained in:
Paul Nothaft
2026-05-18 23:19:42 +02:00
parent b960639035
commit 4b4ecfdf71
@@ -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 && (