arnaudne/Epicure
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: cooking mode shortcuts panel overflow in French (v0.28.1)

Browse Source 
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>
This commit is contained in:
Arnaud
2026-07-14 13:33:44 +02:00
parent 45adb023b9
commit 6ad2731751
5 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/cooking-mode/cooking-mode.tsx
+4 -4
View File
@@ -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>