diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8483dd5..271f73d 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.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
diff --git a/apps/web/components/recipe/substitute-ingredient-popover.tsx b/apps/web/components/recipe/substitute-ingredient-popover.tsx
index c434412..62b6be7 100644
--- a/apps/web/components/recipe/substitute-ingredient-popover.tsx
+++ b/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">
-                  <span className="text-sm font-medium">{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 ml-auto">
+                <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                  <span className="text-sm font-medium break-words">{sub.name}</span>
+                  <Badge variant={IMPACT_VARIANT[sub.flavorImpact]} className="text-[10px] px-1.5 py-0 shrink-0">
                     {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>
diff --git a/apps/web/lib/changelog.ts b/apps/web/lib/changelog.ts
index 76c1a32..6920f26 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.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",
diff --git a/apps/web/package.json b/apps/web/package.json
index 704fce3..5a8a1f8 100644
--- a/apps/web/package.json
+++ b/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",
diff --git a/package.json b/package.json
index dd22a3d..68a0ec0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "epicure",
-  "version": "0.78.1",
+  "version": "0.78.2",
   "private": true,
   "scripts": {
     "dev": "pnpm --filter web dev",