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

@@ -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

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>

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",

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",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "epicure",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "private": true,
   "scripts": {
     "dev": "pnpm --filter web dev",