apps/web/cypress/e2e/cooking-session-page.cy.ts

@@ -3,8 +3,6 @@
 // `GET /cooking-session` behavior (including the optimizer) against a real
 // database.
 
-import { PHONE_VIEWPORT } from "../support/viewports";
-
 const authenticatedProfile = {
   id: 1,
   firstName: "Alice",
@@ -423,72 +421,3 @@ describe("Cooking session page", () => {
     cy.contains("Impossible de charger").should("be.visible");
   });
 });
-
-// Ticket #89 — this page's first dedicated responsive pass (it previously
-// had no `@media` rule at all, see cooking-session-page.scss's own header
-// comment). No layout is restructured on phone (the flex-column shell and
-// the two horizontally-scrolling rows already degrade safely) — this covers
-// the two things that actually needed fixing: comfortable touch targets on
-// the screen's own controls, and a real flex overflow bug in the Recettes
-// tab (a long recipe name had no upper bound and could crowd its portions
-// badge/chevron out of the row).
-describe("Cooking session page (phone)", () => {
-  beforeEach(() => {
-    cy.setViewport("phone");
-    cy.clock(TODAY, ["Date"]);
-    cy.intercept("GET", "**/auth/me", { statusCode: 200, body: authenticatedProfile });
-  });
-
-  it("gives the task cards and stepper nodes a taller, more tappable padding than on desktop", () => {
-    cy.intercept("GET", /\/cooking-session\?/, { statusCode: 200, body: planFixture() });
-    cy.visit("/cuisiner?date=2026-08-17");
-
-    cy.get(".cooking-task")
-      .first()
-      .should(($el) => {
-        // --space-md (16px) on phone vs. the shared checkbox-label rule's
-        // own --space-xs (4px) app-wide default — see cooking-session-page
-        // .scss's phone block.
-        expect(getComputedStyle($el[0]).paddingTop).to.equal("16px");
-      });
-    cy.get(".cooking-stepper__node")
-      .first()
-      .should(($el) => {
-        expect(getComputedStyle($el[0]).paddingTop).to.equal("16px");
-      });
-
-    // The document itself never scrolls sideways, same global rule every
-    // other page is held to.
-    cy.document()
-      .its("documentElement.scrollWidth")
-      .should("be.lte", PHONE_VIEWPORT.width + 1);
-  });
-
-  it("truncates a long recipe name in the Recettes tab instead of pushing its portions badge out of view", () => {
-    const longName =
-      "Un très long nom de recette qui ne devrait surtout pas pousser le badge de portions hors de l'écran";
-    cy.intercept("GET", /\/cooking-session\?/, {
-      statusCode: 200,
-      body: {
-        startDate: "2026-08-17T00:00:00.000Z",
-        finishDate: "2026-08-23T00:00:00.000Z",
-        recipes: [{ recipeId: 1, name: longName, portions: 4 }],
-        phases: [],
-      },
-    });
-    cy.visit("/cuisiner?date=2026-08-17");
-    cy.contains(".cooking-session-page__tab", "Recettes").click();
-
-    cy.get(".cooking-recipes__name").should(($el) => {
-      const s = getComputedStyle($el[0]);
-      expect(s.textOverflow).to.equal("ellipsis");
-      expect(s.whiteSpace).to.equal("nowrap");
-      // The name's own box is clipped narrower than its full text — proof
-      // the truncation is actually engaged, not just declared.
-      expect($el[0].scrollWidth).to.be.greaterThan($el[0].clientWidth);
-    });
-    // ...and the badge survives, still on screen, not clipped away by the
-    // card's own `overflow: hidden`.
-    cy.contains(".cooking-recipes__portions", "4 portions").should("be.visible");
-  });
-});

apps/web/src/pages/cooking-session/cooking-session-page.scss

@@ -13,8 +13,6 @@
 // on the theme.
 // =============================================================================
 
-@use "../../styles/breakpoints" as bp;
-
 .cooking-session-page {
   height: 100%;
   display: flex;
@@ -136,24 +134,12 @@
     cursor: pointer;
   }
 
-  // `flex: 1; min-width: 0` + truncation — without it, a long recipe name
-  // has no upper bound in this flex row and can crowd the portions badge
-  // and chevron off to the side (or past the card's own `overflow: hidden`
-  // on `&__item`, silently clipping them) instead of the name itself
-  // truncating. Same fix as `.recipe-chip__name` (planning-page.scss) for
-  // the identical shape of bug.
   &__name {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     font-weight: 600;
     color: var(--color-text);
   }
 
   &__portions {
-    flex-shrink: 0;
     padding: 0.1rem var(--space-sm);
     border-radius: var(--radius-pill);
     background: var(--color-surface-alt);
@@ -500,61 +486,3 @@
     color: var(--color-text-muted);
   }
 }
-
-// --- Phone (issue #89, first responsive pass) -------------------------------
-// Nothing here reorganizes the layout — the flex-column shell and the two
-// horizontally-scrolling rows (`&__tabs`, `.cooking-stepper`, both the same
-// generic `overflow-x: auto` pattern used throughout the app) already
-// degrade safely on a narrow screen, and every text block wraps within its
-// own flex/block container (no fixed widths). What was actually missing:
-// comfortable touch targets on this screen's own controls — the task cards
-// especially, since ticking one off is THE primary, repeated, one-handed
-// action of the whole "Plan" tab. Same audit `planning-page.scss` got in
-// #88, applied here to this page's own elements.
-@include bp.phone {
-  // The task card is a shared "selectable card" checkbox label
-  // (global.scss's `label:has(> input[type="checkbox"])`, padding
-  // `--space-xs --space-sm` app-wide — fine with a mouse, too tight to tap
-  // reliably mid-cooking). `--space-md` all around clears Android's 48dp
-  // minimum touch target (this app is Android-only, see the root README)
-  // even in the worst case — a one-line headline with no utensils and no
-  // "Mutualisé" badge (~25px of text): 25 + 2×16 = 57px. Bumped here, not
-  // in the global rule: this page's task cards are the one place site-wide
-  // where quick, repeated tapping actually matters. Scoped under
-  // `.cooking-phase__tasks` (not a bare `.cooking-task` selector) for the
-  // same specificity reason as `&__tasks .cooking-task--done` above: a
-  // plain single class loses to `label:has(> input[type="checkbox"])`'s
-  // own specificity (a `:has()` argument counts its inner element +
-  // attribute), so it silently never applied without this.
-  .cooking-phase__tasks .cooking-task {
-    padding: var(--space-md);
-  }
-
-  // Same reasoning for the stepper's own nodes: the enlarged 1.75rem
-  // (28px) marker below is this node's tallest element, so `--space-md`
-  // padding puts its total height at 28 + 2×16 = 60px, comfortably past
-  // 48dp rather than landing exactly on it.
-  .cooking-stepper__node {
-    padding: var(--space-md);
-  }
-
-  .cooking-stepper__marker {
-    width: 1.75rem;
-    height: 1.75rem;
-  }
-
-  // Tab bar, Recettes summary row, Prev/Next — same treatment, so every
-  // tappable control on this page ends up consistently comfortable rather
-  // than fixing only the one most obviously broken.
-  .cooking-session-page__tab {
-    padding: var(--space-md);
-  }
-
-  .cooking-recipes__row {
-    padding: var(--space-md);
-  }
-
-  .cooking-plan__nav-btn {
-    padding: var(--space-md) var(--space-lg);
-  }
-}