fix: widen and reflow ingredient substitutes popover for narrow/mobile viewports (v0.78.2)

Fixed 320px width and a single-row name/ratio/badge layout cramped on mobile. Width now scales with viewport (min(92vw, 26rem)); the ratio wraps to its own line below name+badge on narrow screens instead of squeezing in.

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.78.2 — 2026-07-24 14:30
+
+### Fixed
+- Ingredient substitutes popover was a fixed 320px wide, cramping the name/ratio/impact-badge row on narrow screens. Now scales with viewport (`min(92vw, 26rem)`) and wraps the ratio onto its own line on small widths instead of squeezing everything into one row.
+
 ## 0.78.1 — 2026-07-24 14:10
 
 ### Fixed

apps/web/components/recipe/substitute-ingredient-popover.tsx

@@ -75,7 +75,7 @@ export function SubstituteIngredientPopover({
       >
         <Shuffle className="h-3 w-3" />
       </PopoverTrigger>
-      <PopoverContent className="w-80 p-3 space-y-3" align="start">
+      <PopoverContent className="w-[min(92vw,26rem)] p-3 space-y-3" align="start">
         <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
           {t("substitutesFor")} <span className="text-foreground normal-case">{ingredient}</span>
         </p>
@@ -89,12 +89,12 @@ export function SubstituteIngredientPopover({
           <div className="space-y-2.5">
             {substitutions.map((sub, i) => (
               <div key={i} className="space-y-0.5">
-                <div className="flex items-center gap-2">
+                <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
-                  <span className="text-sm font-medium">{sub.name}</span>
+                  <span className="text-sm font-medium break-words">{sub.name}</span>
-                  <span className="text-xs text-muted-foreground font-mono">{sub.ratio}</span>
+                  <Badge variant={IMPACT_VARIANT[sub.flavorImpact]} className="text-[10px] px-1.5 py-0 shrink-0">
-                  <Badge variant={IMPACT_VARIANT[sub.flavorImpact]} className="text-[10px] px-1.5 py-0 ml-auto">
                     {sub.flavorImpact}
                   </Badge>
+                  <span className="text-xs text-muted-foreground font-mono w-full sm:w-auto">{sub.ratio}</span>
                 </div>
                 <p className="text-xs text-muted-foreground">{sub.note}</p>
               </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.78.1";
+export const APP_VERSION = "0.78.2";
 
 export type ChangelogEntry = {
   version: string;
@@ -11,6 +11,13 @@ export type ChangelogEntry = {
 };
 
 export const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "0.78.2",
+    date: "2026-07-24 14:30",
+    fixed: [
+      "Ingredient substitutes popover was a fixed 320px wide, cramping the name/ratio/impact-badge row on narrow screens. Now scales with viewport (min(92vw, 26rem)) and wraps the ratio onto its own line on small widths instead of squeezing everything into one row.",
+    ],
+  },
   {
     version: "0.78.1",
     date: "2026-07-24 14:10",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicure/web",
-  "version": "0.78.1",
+  "version": "0.78.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

package.json

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