From bfc1a7310487e231518cf436e65990ae5999f129 Mon Sep 17 00:00:00 2001
From: Lucas Rayan <lucas.guerra@pop-pe.rnp.br>
Date: Mon, 2 Nov 2026 20:24:38 -0300
Subject: [PATCH] =?UTF-8?q?fix(menu):=20cabe=C3=A7alho=20n=C3=A3o=20estour?=
 =?UTF-8?q?a=20em=20360-375px=20e=20o=20menu=20aberto=20rola=20por=20intei?=
 =?UTF-8?q?ro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Abaixo de 390px o botão de tema vai para dentro do menu, que passa a rolar com o
cartão do livro e os links juntos. Fechar e logo ganham área de toque de 44px.
Verificado em 6 idiomas e de 320 a 430px sem nada ultrapassar o cabeçalho.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md          |  4 ++++
 components/Header.jsx | 19 +++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c2c9e43..81e390b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -36,6 +36,10 @@ Tudo o que muda de relevante no ESPDocs está aqui. O formato segue o
 
 ### Corrigido
 
+- Menu no celular: o botão do menu ultrapassava a borda do cabeçalho em 360 e 375 px. Abaixo
+  de 390 px o botão de tema passa para dentro do menu. O menu aberto rola inteiro (cartão do
+  livro e links juntos), então todos os itens ficam alcançáveis em telas baixas, e o botão de
+  fechar e o logo ganharam área de toque de 44 px.
 - O build da imagem Docker repete até 3 vezes quando falha ao baixar as Google Fonts, falha
   intermitente que derrubava o CI com "next/font/google queries have exactly one entry".
 - Card do catálogo: o botão "Ver no AliExpress" fica sempre no rodapé, alinhado entre os cards.
diff --git a/components/Header.jsx b/components/Header.jsx
index 38b378e..5a12a26 100644
--- a/components/Header.jsx
+++ b/components/Header.jsx
@@ -360,7 +360,7 @@ export default function Header() {
 				<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"
+						className="flex min-h-11 min-w-11 shrink-0 items-center gap-2.5 rounded-full pl-1 pr-2"
 						aria-label={
 							isPt
 								? "ESPDocs, página inicial"
@@ -455,7 +455,9 @@ export default function Header() {
 						</Link>
 						<SearchDialog />
 						<LanguageSelector />
-						<ThemeToggle isPt={isPt} isEs={isEs} isFr={isFr} isDe={isDe} isZh={isZh} />
+						<div className="max-[389px]:hidden">
+							<ThemeToggle isPt={isPt} isEs={isEs} isFr={isFr} isDe={isDe} isZh={isZh} />
+						</div>
 						<button
 							ref={menuButtonRef}
 							type="button"
@@ -523,13 +525,14 @@ export default function Header() {
 									ref={closeRef}
 									type="button"
 									onClick={() => setDrawerOpen(false)}
-									className="grid h-10 w-10 place-items-center rounded-full border border-line text-ink transition-colors hover:bg-surface-2"
+									className="grid h-11 w-11 place-items-center rounded-full border border-line text-ink transition-colors hover:bg-surface-2"
 									aria-label={isPt ? "Fechar menu" : isEs ? "Cerrar menú" : isFr ? "Fermer le menu" : isZh ? "关闭菜单" : isDe ? "Menü schließen" : "Close menu"}
 								>
 									<X className="h-5 w-5" aria-hidden="true" />
 								</button>
 							</div>
 
+							<div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
 							{isPt && (
 								<div className="px-4 pb-2">
 									<Link
@@ -557,7 +560,7 @@ export default function Header() {
 							)}
 
 							<nav
-								className="flex-1 overflow-y-auto px-3 py-2"
+								className="px-3 py-2"
 								aria-label={isPt ? "Navegação móvel" : isEs ? "Navegación móvil" : isFr ? "Navigation mobile" : isZh ? "移动端导航" : isDe ? "Mobile Navigation" : "Mobile navigation"}
 							>
 								{visibleMobileLinks.map((link) => (
@@ -574,6 +577,14 @@ export default function Header() {
 								))}
 							</nav>
 
+							<div className="flex items-center justify-between gap-3 px-6 py-2 min-[390px]:hidden">
+								<span className="text-sm font-medium text-ink-soft">
+									{isPt ? "Tema" : isEs ? "Tema" : isFr ? "Thème" : isZh ? "主题" : isDe ? "Design" : "Theme"}
+								</span>
+								<ThemeToggle isPt={isPt} isEs={isEs} isFr={isFr} isDe={isDe} isZh={isZh} />
+							</div>
+							</div>
+
 							<div className="p-4 pt-2">
 								<Link href={getLinkHref("/seletor")} onClick={() => setDrawerOpen(false)} className="btn btn-primary w-full">
 									<SlidersHorizontal className="h-4 w-4" aria-hidden="true" />