From b26116fbe3b21d1da74c30b512fa56e2053d165c Mon Sep 17 00:00:00 2001
From: Git Agent <git@readabook.local>
Date: Wed, 26 Aug 2026 13:12:05 +0200
Subject: [PATCH] =?UTF-8?q?fix(web):=20lecteur=20mobile=20=E2=80=94=20comp?=
 =?UTF-8?q?acter=20la=20barre=20du=20lecteur=20sur=20t=C3=A9l=C3=A9phone?=
 =?UTF-8?q?=20(wrap=20flex,=20libell=C3=A9s=20secondaires=20masqu=C3=A9s,?=
 =?UTF-8?q?=20navigation/plein=20=C3=A9cran=20en=20ic=C3=B4nes,=20select?=
 =?UTF-8?q?=20de=20mode=20r=C3=A9ductible)=20pour=20=C3=A9liminer=20le=20r?=
 =?UTF-8?q?ognage=20=C3=A0=20droite=20(bug=20#40)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/reader/ReaderShell.tsx       | 19 +++---
 apps/web/src/reader/readerRuntime.test.ts |  9 +++
 apps/web/src/styles/app.css               | 72 +++++++++++++++++++++++
 3 files changed, 91 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/reader/ReaderShell.tsx b/apps/web/src/reader/ReaderShell.tsx
index 87935e0..57edf60 100644
--- a/apps/web/src/reader/ReaderShell.tsx
+++ b/apps/web/src/reader/ReaderShell.tsx
@@ -1,4 +1,4 @@
-import { ArrowLeft, ArrowRight } from "lucide-react";
+import { ArrowLeft, ArrowRight, Maximize2, Minimize2 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { ErrorRibbon } from "../components/ui";
 import { navigate } from "../router";
@@ -189,9 +189,9 @@ export function ReaderShell({ title, backHref, error, onRetry, controls, zoomCon
           setHeaderVisible(true);
         }}
       >
-        <button className="ghost-button" onClick={() => navigate(backHref)}>
+        <button className="ghost-button reader-back-button" onClick={() => navigate(backHref)} aria-label="Retour">
           <ArrowLeft size={17} />
-          Retour
+          <span>Retour</span>
         </button>
         <strong className="reader-title">{title}</strong>
         <span className="reader-position">{controls.positionLabel}</span>
@@ -204,12 +204,12 @@ export function ReaderShell({ title, backHref, error, onRetry, controls, zoomCon
             </select>
           </label>
         )}
-        <button className="ghost-button" onClick={controls.onPrevious} disabled={!controls.canPrevious}>
+        <button className="ghost-button reader-nav-button reader-previous-button" onClick={controls.onPrevious} disabled={!controls.canPrevious} aria-label="Page precedente">
           <ArrowLeft size={16} />
-          Precedent
+          <span>Precedent</span>
         </button>
-        <button className="ghost-button" onClick={controls.onNext} disabled={!controls.canNext}>
-          Suivant
+        <button className="ghost-button reader-nav-button reader-next-button" onClick={controls.onNext} disabled={!controls.canNext} aria-label="Page suivante">
+          <span>Suivant</span>
           <ArrowRight size={16} />
         </button>
         {zoomControls && (
@@ -226,8 +226,9 @@ export function ReaderShell({ title, backHref, error, onRetry, controls, zoomCon
             </button>
           </div>
         )}
-        <button className="ghost-button reader-fullscreen-toggle" onClick={() => void toggleFullscreen()} aria-pressed={fullscreenActive}>
-          {fullscreenActive ? "Quitter le plein écran" : "Plein écran"}
+        <button className="ghost-button reader-fullscreen-toggle" onClick={() => void toggleFullscreen()} aria-pressed={fullscreenActive} aria-label={fullscreenActive ? "Quitter le plein écran" : "Plein écran"}>
+          {fullscreenActive ? <Minimize2 size={16} /> : <Maximize2 size={16} />}
+          <span>{fullscreenActive ? "Quitter le plein écran" : "Plein écran"}</span>
         </button>
       </header>
       {error && (
diff --git a/apps/web/src/reader/readerRuntime.test.ts b/apps/web/src/reader/readerRuntime.test.ts
index d56d18c..ba67a29 100644
--- a/apps/web/src/reader/readerRuntime.test.ts
+++ b/apps/web/src/reader/readerRuntime.test.ts
@@ -222,6 +222,15 @@ describe("reader runtime helpers", () => {
     expect(verticalContent).toContain("align-self: start");
   });
 
+  it("lets the mobile reader toolbar wrap instead of overflowing horizontally", () => {
+    const styles = readFileSync(new URL("../styles/app.css", import.meta.url), "utf8");
+
+    expect(styles).toContain(".reader-topbar {\n    gap: 8px;\n    flex-wrap: wrap;");
+    expect(styles).toContain("overflow: hidden");
+    expect(styles).toContain(".reader-back-button span,\n  .reader-nav-button span,\n  .reader-fullscreen-toggle span,\n  .reader-mode-control > span");
+    expect(styles).toContain(".reader-mode-control select {\n    width: 100%;");
+  });
+
   it("detects fullscreen support and active fullscreen element", () => {
     const fullscreenElement = { requestFullscreen: () => Promise.resolve() } as unknown as HTMLElement;
     const regularElement = {} as HTMLElement;
diff --git a/apps/web/src/styles/app.css b/apps/web/src/styles/app.css
index ff0e1f4..f22ba0e 100644
--- a/apps/web/src/styles/app.css
+++ b/apps/web/src/styles/app.css
@@ -1282,6 +1282,78 @@ main.app-main-reader .reader-page {
 
   .reader-topbar {
     gap: 8px;
+    flex-wrap: wrap;
+    align-content: start;
+    overflow: hidden;
+  }
+
+  .reader-back-button,
+  .reader-nav-button,
+  .reader-fullscreen-toggle {
+    width: 34px;
+    min-width: 34px;
+    padding: 0;
+  }
+
+  .reader-back-button {
+    order: 1;
+  }
+
+  .reader-title {
+    order: 2;
+    flex: 1 1 120px;
+    font-size: 0.9rem;
+  }
+
+  .reader-position {
+    order: 3;
+    min-width: 78px;
+    font-size: 0.78rem;
+  }
+
+  .reader-fullscreen-toggle {
+    order: 4;
+    margin-left: 0;
+  }
+
+  .reader-mode-control {
+    order: 5;
+    flex: 1 1 132px;
+    min-width: 0;
+  }
+
+  .reader-mode-control select {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    font-size: 0.78rem;
+  }
+
+  .reader-previous-button {
+    order: 6;
+  }
+
+  .reader-next-button {
+    order: 7;
+  }
+
+  .reader-zoom-controls {
+    order: 8;
+    flex: 0 1 auto;
+    min-width: 0;
+    gap: 4px;
+  }
+
+  .reader-zoom-label {
+    min-width: 46px;
+    font-size: 0.78rem;
+  }
+
+  .reader-back-button span,
+  .reader-nav-button span,
+  .reader-fullscreen-toggle span,
+  .reader-mode-control > span {
+    display: none;
   }
 
   .reader-zoom-reset {