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

@@ -5,8 +5,6 @@
 // The favorite-toggle and delete-recipe journeys moved to recipes.feature —
 // this file now only covers catalog browsing/display.
 
-import { PHONE_VIEWPORT } from "../support/viewports";
-
 const authenticatedProfile = {
   id: 1,
   firstName: "Alice",
@@ -462,38 +460,3 @@ describe("Recipe catalog", () => {
     );
   });
 });
-
-// Ticket #90 — `.recipe-table-wrap` had no horizontal-scroll guard at all
-// (unlike the planning grid's own wrapper), so a narrow viewport just let
-// the browser compress every column instead of scrolling. Below the
-// tablet breakpoint (1024px) the master-detail split already collapses to
-// one column (recipes.scss's own `bp.tablet-down` rule) and gives the
-// table the full page width — still comfortably under `.recipe-table`'s
-// own 36rem floor on a phone, which is what this covers.
-describe("Recipe catalog (phone)", () => {
-  beforeEach(() => {
-    cy.setViewport("phone");
-    interceptAuth();
-  });
-
-  it("keeps the table on its own horizontal scroll, at full width, instead of squeezing its columns", () => {
-    cy.intercept("GET", /\/recipes\?/, { statusCode: 200, body: [ratatouille, omelette] });
-
-    cy.visit("/recettes");
-
-    cy.contains(".recipe-table__name", "Ratatouille").should("be.visible");
-    cy.contains(".recipe-table__name", "Omelette").should("be.visible");
-
-    cy.get(".recipe-table-wrap").should(($el) => {
-      const s = getComputedStyle($el[0]);
-      expect(s.overflowX).to.be.oneOf(["auto", "scroll"]);
-      expect($el[0].scrollWidth).to.be.greaterThan($el[0].clientWidth);
-    });
-
-    // ...and that overflow stays *inside* the wrapper — same global rule
-    // every other page is held to.
-    cy.document()
-      .its("documentElement.scrollWidth")
-      .should("be.lte", PHONE_VIEWPORT.width + 1);
-  });
-});

apps/web/cypress/e2e/shopping-list-page.cy.ts

@@ -1,67 +0,0 @@
-// Plain layout-mode spec (not Gherkin) for ShoppingListPage's own
-// phone-viewport pass (issue #90) — the actual grouped-list rendering,
-// aggregation and week-navigation journey is already covered end-to-end by
-// shopping-list.feature; this only exercises the responsive change added
-// here. Mocks the API via cy.intercept — this job doesn't run a live
-// backend (see .github/workflows/ci.yml).
-
-import { PHONE_VIEWPORT } from "../support/viewports";
-
-const authenticatedProfile = {
-  id: 1,
-  firstName: "Alice",
-  lastName: "Martin",
-  email: "alice@example.com",
-  tokenVersion: 0,
-  houseId: 1,
-  dietId: null,
-};
-
-/** Same minimal-fixture convention as shopping-list.ts's own `buildShoppingListItem` step-def helper — only the fields this page actually reads. */
-function shoppingListItem(id: number, ingredientKey: string, icon: string, category: string) {
-  return {
-    ingredient: {
-      id,
-      key: ingredientKey,
-      icon,
-      category,
-      subcategory: category,
-      reproducible: false,
-      allergens: [],
-      diets: [],
-    },
-    quantity: 2,
-    unit: { id, key: "piece", type: "COUNT", toBaseFactor: 1 },
-  };
-}
-
-describe("Shopping list page (phone)", () => {
-  beforeEach(() => {
-    cy.setViewport("phone");
-    cy.intercept("GET", "**/auth/me", { statusCode: 200, body: authenticatedProfile });
-  });
-
-  it("gives each row a taller, more legible padding than on desktop, with no horizontal body scroll", () => {
-    cy.intercept("GET", /\/shopping-list\?/, {
-      statusCode: 200,
-      body: {
-        startDate: "2026-08-17",
-        finishDate: "2026-08-23",
-        items: [shoppingListItem(1, "egg", "EGG", "dairyAndCheese")],
-      },
-    }).as("getList");
-
-    cy.visit("/liste-de-courses");
-    cy.wait("@getList");
-
-    cy.get(".shopping-list__item").should(($el) => {
-      // --space-md (16px) on phone vs. the desktop default --space-sm
-      // (8px) — see shopping-list-page.scss's phone block.
-      expect(getComputedStyle($el[0]).paddingTop).to.equal("16px");
-    });
-
-    cy.document()
-      .its("documentElement.scrollWidth")
-      .should("be.lte", PHONE_VIEWPORT.width + 1);
-  });
-});

apps/web/src/features/recipes/recipes.scss

@@ -260,17 +260,6 @@
   height: 100%;
   min-height: 0;
   overflow-y: auto;
-  // Issue #90: unlike the planning grid's own wrapper (planning-page.scss),
-  // this one had no horizontal guard at all — on a narrow viewport the
-  // table's `width: 100%` below just let the browser compress every column
-  // (photo/name/allergens/diets) to fit instead of scrolling. Same fix,
-  // scaled down: 4 narrower columns don't need anywhere near the planning
-  // grid's 62rem, but they do need *some* floor so the badge columns don't
-  // get squeezed to the point of wrapping every single pill onto its own
-  // line. Shared by both the full catalog (`/recettes`) and
-  // `RecipePickerDialog`'s own instance of this same table/wrapper — fixes
-  // the identical compression there too, not just the full-page case.
-  overflow-x: auto;
   background: var(--color-surface);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
@@ -278,7 +267,6 @@
 
 .recipe-table {
   width: 100%;
-  min-width: 36rem;
   border-collapse: collapse;
   text-align: left;
 

apps/web/src/pages/shopping-list/shopping-list-page.scss

@@ -5,8 +5,6 @@
 // `__status`), a simple grouped list rather than a grid below it.
 // =============================================================================
 
-@use "../../styles/breakpoints" as bp;
-
 .shopping-list-page {
   height: 100%;
   display: flex;
@@ -102,25 +100,3 @@
     font-variant-numeric: tabular-nums;
   }
 }
-
-// --- Phone (issue #90) ------------------------------------------------------
-// This list has no checkbox/delete button at all — it's deliberately
-// read-only (see ShoppingListPage.tsx's own doc comment) — so, unlike the
-// planning grid or the cooking-session task cards, there's no *tap* target
-// to enlarge here; the chantier's original ticket assumed some existed
-// (written before this page's actual code was read). The structure also
-// already doesn't overflow: `&-name` is `flex: 1; min-width: 0` and wraps
-// rather than pushing `&-quantity` out. What phone-viewport reading
-// genuinely rewards here — held in one hand, glanced at repeatedly while
-// pushing a cart — is a slightly roomier row and a clearer icon, not a
-// structural change.
-@include bp.phone {
-  .shopping-list__item {
-    padding: var(--space-md);
-  }
-
-  .shopping-list__item-icon svg {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-}