fix(header): fit the header on narrow phones after the language selector

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -26,6 +26,13 @@ Tudo o que muda de relevante no ESPDocs está aqui. O formato segue o
   - Suporte CSS com hifenação automática (`hyphens: auto`) para alemão e francês via atributo `lang` dinâmico no layout raiz.
   - Extensão da suíte de verificação: `scripts/check-i18n.mjs` valida `fr` e `de`, `scripts/smoke-imagem.sh` testa as rotas francesas e alemãs e `scripts/verifica-vazamentos.py` varre todas as 36 rotas em francês e 36 em alemão (texto visível e blocos JSON-LD).
 
+### Corrigido
+
+- O cabeçalho passou a caber em telas estreitas. Desde o seletor de idioma, a faixa de
+  ícones ficava com ~410 px de largura mínima e o botão do menu era cortado em
+  celulares (390 e 360 px). Agora o seletor fica compacto no celular e o logo mostra
+  só o ícone abaixo de 360 px; sem rolagem horizontal de 320 px para cima.
+
 ## [1.4.2] - 2026-11-02
 
 ### Corrigido

components/Header.jsx

@@ -316,7 +316,7 @@ export default function Header() {
 	return (
 		<header className="sticky top-0 z-50 pt-3 sm:pt-4">
 			<div className="shell">
-				<div className="nav-pill flex h-16 items-center justify-between gap-3 rounded-full px-3 sm:px-4">
+				<div className="nav-pill flex h-16 items-center justify-between gap-1.5 rounded-full px-2.5 sm:gap-3 sm:px-4">
 					<Link
 						href={getLinkHref("/")}
 						className="flex min-h-11 shrink-0 items-center gap-2.5 rounded-full pl-1 pr-2"
@@ -333,7 +333,7 @@ export default function Header() {
 						}
 					>
 						<Logo className="h-[30px] w-[30px]" />
-						<span className="font-display text-[1.3rem] font-semibold leading-none tracking-[-0.045em] text-ink">ESPDocs</span>
+						<span className="font-display text-[1.3rem] font-semibold max-[359px]:sr-only leading-none tracking-[-0.045em] text-ink">ESPDocs</span>
 					</Link>
 
 					<nav
@@ -407,7 +407,7 @@ export default function Header() {
 						</Link>
 					</nav>
 
-					<div className="flex items-center gap-1.5">
+					<div className="flex items-center gap-1 sm:gap-1.5">
 						<Link href={getLinkHref("/seletor")} className="btn btn-primary btn-sm hidden lg:inline-flex">
 							<SlidersHorizontal className="h-4 w-4" aria-hidden="true" />
 							{isPt ? "Selecionar chip" : isEs ? "Seleccionar chip" : isFr ? "Choisir une puce" : isDe ? "Chip auswählen" : "Select chip"}

components/LanguageSelector.jsx

@@ -60,7 +60,7 @@ export default function LanguageSelector() {
 			<button
 				type="button"
 				onClick={() => setOpen(!open)}
-				className="flex h-11 min-w-[44px] items-center gap-1.5 rounded-full border border-line bg-surface px-3 text-sm font-semibold text-ink transition-colors hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-accent"
+				className="flex h-11 min-w-[44px] items-center justify-center gap-1.5 rounded-full border border-line bg-surface px-2.5 text-sm sm:px-3 font-semibold text-ink transition-colors hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-accent"
 				aria-haspopup="listbox"
 				aria-expanded={open}
 				aria-label={
@@ -84,10 +84,10 @@ export default function LanguageSelector() {
 						: `Idioma: ${currentLocale.label}`
 				}
 			>
-				<Globe className="h-4 w-4 text-muted" aria-hidden="true" />
+				<Globe className="hidden h-4 w-4 text-muted sm:block" aria-hidden="true" />
 				<span className="font-semibold">{currentLocale.short}</span>
 				<ChevronDown
-					className={`h-3 w-3 text-muted transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+					className={`hidden h-3 w-3 text-muted transition-transform duration-200 sm:block ${open ? "rotate-180" : ""}`}
 					aria-hidden="true"
 				/>
 			</button>