apps/web/cypress/e2e/layout.cy.ts

@@ -186,7 +186,7 @@ describe("Responsive breakpoint — the sidebar becomes a bottom tab bar under 6
     cy.intercept("GET", /\/planning\?/, { statusCode: 200, body: null });
   });
 
-  it("renders the bottom nav instead of the sidebar, icon-only, with a working Plus tab", () => {
+  it("renders the bottom nav instead of the sidebar, with every route tab legible and a working Plus tab", () => {
     cy.setViewport("phone");
     cy.visit("/");
 
@@ -202,15 +202,11 @@ describe("Responsive breakpoint — the sidebar becomes a bottom tab bar under 6
       expect(getComputedStyle($nav[0]).position).to.equal("fixed");
     });
 
-    // Issue #105 — icon-only bar: each tab's `span.label` stays in the DOM
+    // Every route tab keeps its icon *and* label legible — this bar never
-    // (accessible name for the link) but is visually hidden, only the icon
+    // falls back to icon-only or horizontal scroll, unlike the old
-    // shows. Same treatment as the desktop collapsed rail (sidebar.cy.ts).
+    // squashed sidebar treatment it replaces (only 4 short tabs, always
-    cy.contains(".app-bottom-nav a", "Planning")
+    // fits).
-      .should("have.attr", "href", "/")
+    cy.contains(".app-bottom-nav a", "Planning").find("span.label").should("be.visible");
-      .within(() => {
-        cy.get("span.label").should("exist").and("not.be.visible");
-        cy.get("svg").should("be.visible");
-      });
     cy.contains(".app-bottom-nav a", "Recettes").should("have.attr", "href", "/recettes");
     cy.contains(".app-bottom-nav a", "Liste de courses").should(
       "have.attr",

apps/web/src/layouts/AppLayout.scss

@@ -415,28 +415,13 @@
     cursor: pointer;
 
     svg {
-      width: 1.5rem;
+      width: 1.375rem;
-      height: 1.5rem;
+      height: 1.375rem;
     }
 
-    // Icon-only bar (issue #105): the visible label is dropped. "Liste de
-    // courses" (16 chars) wrapped to two lines in a ~90px tab while the
-    // others stayed on one, so its icon+label block was taller and its
-    // icon sat visibly higher than the rest. Kept in the DOM, visually
-    // hidden the accessibility-safe way, so a screen reader still announces
-    // each tab by name and the `<NavLink>`/button keeps its accessible
-    // label (no `aria-label` to duplicate the i18n string).
     .label {
-      position: absolute;
+      font-size: var(--font-size-xs);
-      width: 1px;
+      font-weight: 600;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0 0 0 0);
-      clip-path: inset(50%);
-      white-space: nowrap;
-      border: 0;
     }
 
     // Applied by NavLink itself (see AppLayout.tsx's `className` prop) for