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:
@@ -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 && (
|
||||
|
||||
Reference in New Issue
Block a user