From 6ad27317513e50cb74a37fb74731343dc110be32 Mon Sep 17 00:00:00 2001
From: Arnaud <anelissen@solem.fr>
Date: Tue, 14 Jul 2026 13:33:44 +0200
Subject: [PATCH] fix: cooking mode shortcuts panel overflow in French
 (v0.28.1)

Longer French labels pushed the absolutely-positioned help panel past
its content box with no height cap or wrap guard, overlapping the
surrounding cooking-mode chrome. Cap panel height with internal
scroll, stack columns on narrow viewports, and let rows wrap instead
of forcing horizontal overflow.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 CHANGELOG.md                                      | 5 +++++
 apps/web/components/cooking-mode/cooking-mode.tsx | 8 ++++----
 apps/web/lib/changelog.ts                         | 9 ++++++++-
 apps/web/package.json                             | 2 +-
 package.json                                      | 2 +-
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2943bd1..0e51143 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 All notable changes to Epicure are documented here. This file is mirrored in-app at `/changelog` (and in the admin dashboard) via `apps/web/lib/changelog.ts` — update both together.
 
+## 0.28.1 — 2026-07-14 14:25
+
+### Fixed
+- Cooking mode's keyboard/voice shortcuts panel could overflow and overlap the surrounding screen in French (longer translated labels) — now scrolls internally and wraps instead of overflowing.
+
 ## 0.28.0 — 2026-07-14 14:05
 
 ### Added
diff --git a/apps/web/components/cooking-mode/cooking-mode.tsx b/apps/web/components/cooking-mode/cooking-mode.tsx
index c58ca74..47988f3 100644
--- a/apps/web/components/cooking-mode/cooking-mode.tsx
+++ b/apps/web/components/cooking-mode/cooking-mode.tsx
@@ -398,7 +398,7 @@ export function CookingMode({
           onClick={() => setShowHelp(false)}
         >
           <div
-            className="bg-popover border rounded-2xl shadow-xl w-full max-w-lg p-6 space-y-6"
+            className="bg-popover border rounded-2xl shadow-xl w-full max-w-lg max-h-[85vh] overflow-y-auto p-6 space-y-6"
             onClick={(e) => e.stopPropagation()}
           >
             <div className="flex items-center justify-between">
@@ -408,7 +408,7 @@ export function CookingMode({
               </button>
             </div>
 
-            <div className="grid grid-cols-2 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
               <div className="space-y-3">
                 <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{t("keyboardSection")}</p>
                 <div className="space-y-2 text-sm">
@@ -419,7 +419,7 @@ export function CookingMode({
                     ["?", t("shortcuts.toggleHelp")],
                     ["Esc", t("shortcuts.exitMode")],
                   ].map(([key, label]) => (
-                    <div key={key} className="flex items-center justify-between gap-4">
+                    <div key={key} className="flex flex-wrap items-center justify-between gap-1.5">
                       <kbd className="font-mono text-xs bg-muted px-2 py-0.5 rounded border border-border">{key}</kbd>
                       <span className="text-muted-foreground text-right">{label}</span>
                     </div>
@@ -438,7 +438,7 @@ export function CookingMode({
                     [t("voiceLabels.resetCmd"), t("voiceLabels.resetLabel")],
                     [t("voiceLabels.repeatCmd"), t("voiceLabels.repeatLabel")],
                   ].map(([cmd, label]) => (
-                    <div key={cmd} className="flex items-center justify-between gap-4">
+                    <div key={cmd} className="flex flex-wrap items-center justify-between gap-1.5">
                       <span className="font-mono text-xs bg-muted px-2 py-0.5 rounded border border-border whitespace-nowrap">&ldquo;{cmd}&rdquo;</span>
                       <span className="text-muted-foreground text-right">{label}</span>
                     </div>
diff --git a/apps/web/lib/changelog.ts b/apps/web/lib/changelog.ts
index 7d493fd..216431c 100644
--- a/apps/web/lib/changelog.ts
+++ b/apps/web/lib/changelog.ts
@@ -1,5 +1,5 @@
 // Mirrors CHANGELOG.md at the repo root — update both together.
-export const APP_VERSION = "0.28.0";
+export const APP_VERSION = "0.28.1";
 
 export type ChangelogEntry = {
   version: string;
@@ -11,6 +11,13 @@ export type ChangelogEntry = {
 };
 
 export const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "0.28.1",
+    date: "2026-07-14 14:25",
+    fixed: [
+      "Cooking mode's keyboard/voice shortcuts panel could overflow and overlap the surrounding screen in French (longer translated labels) — now scrolls internally and wraps instead of overflowing.",
+    ],
+  },
   {
     version: "0.28.0",
     date: "2026-07-14 14:05",
diff --git a/apps/web/package.json b/apps/web/package.json
index 99a80c3..fb33c04 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epicure/web",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/package.json b/package.json
index 05ad25d..8ac6f74 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "epicure",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "private": true,
   "scripts": {
     "dev": "pnpm --filter web dev",