From 04233da3430e05fb81880bd9b9e4ef63a841ae04 Mon Sep 17 00:00:00 2001
From: Z User <z@container>
Date: Thu, 29 Oct 2026 08:32:21 +0000
Subject: [PATCH] 5b6b4fb9-90e5-4481-8fcf-ba664d43edb4

---
 src/components/ava/link-dialog.tsx |  8 ++++----
 src/components/ui/alert-dialog.tsx |  2 ++
 src/components/ui/dialog.tsx       |  4 ++++
 src/lib/version.ts                 | 17 ++++++++++++++++-
 worklog.md                         | 21 +++++++++++++++++++++
 5 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/components/ava/link-dialog.tsx b/src/components/ava/link-dialog.tsx
index c3159e9..4e5f0be 100755
--- a/src/components/ava/link-dialog.tsx
+++ b/src/components/ava/link-dialog.tsx
@@ -226,7 +226,7 @@ function LinkDialogBody() {
   }
 
   return (
-    <DialogContent className="sm:max-w-md">
+    <DialogContent className="sm:max-w-lg">
       <DialogHeader>
         <DialogTitle className="flex items-center gap-2">
           <Link2 className="size-4 text-emerald-400" aria-hidden />
@@ -240,7 +240,7 @@ function LinkDialogBody() {
       </DialogHeader>
 
       {playlist ? (
-        <div className="space-y-2">
+        <div className="min-w-0 space-y-2">
           <div className="flex items-center gap-2">
             <Button
               variant="outline"
@@ -382,7 +382,7 @@ function LinkDialogBody() {
           role="alert"
           className="space-y-1 rounded-md border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-xs leading-relaxed text-rose-300"
         >
-          <p>{error}</p>
+          <p className="break-words">{error}</p>
           {errorCode === 'bot-wall' && (
             <button
               type="button"
@@ -406,7 +406,7 @@ function LinkDialogBody() {
       )}
 
       {!playlist && recent.length > 0 && (
-        <div>
+        <div className="min-w-0">
           <p className="mb-1.5 font-mono text-[10px] tracking-[0.2em] text-zinc-500">
             RECENT LINKS
           </p>
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 0863e40..9b9d4b2 100755
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -55,6 +55,8 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         className={cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          // single column capped at the available width (same v7.5.1 fix as dialog.tsx)
+          "grid-cols-[minmax(0,1fr)]",
           className
         )}
         {...props}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index d9ccec9..a92d159 100755
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -61,6 +61,10 @@ function DialogContent({
         data-slot="dialog-content"
         className={cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          // single column capped at the available width — grid items with
+          // nowrap content (truncated list rows, long URLs) can no longer
+          // blow the implicit track out past the dialog border (v7.5.1)
+          "grid-cols-[minmax(0,1fr)]",
           className
         )}
         {...props}
diff --git a/src/lib/version.ts b/src/lib/version.ts
index a6218f6..fd1f635 100755
--- a/src/lib/version.ts
+++ b/src/lib/version.ts
@@ -7,6 +7,21 @@
 // (v6.0 = rename to Open Visualization Engine + version indicator).
 //
 // History:
+//   7.5.1 — Link dialog width fix: text no longer escapes the dialog box.
+//           Root cause: Radix dialogs lay their children in an implicit CSS
+//           grid whose single column sizes to the widest child's min-content;
+//           the RECENT LINKS rows carry truncate spans (white-space: nowrap),
+//           and Chromium measures a nowrap flex item's full text width for
+//           that measurement — so a long saved title (e.g. "Bobby Foxx — This
+//           Is Why We Can't Have Nice Things (Official Music Video)") blew
+//           the column ~40 px past the 448 px dialog, and EVERY child (title,
+//           description, input + Load, rows, footer) laid out beyond the
+//           right border. Fix: the shared Dialog/AlertDialog content now pins
+//           the column to minmax(0,1fr) — capped at the available width, so
+//           no nowrap content can ever stretch a dialog again (covers every
+//           dialog app-wide) — the Link dialog widened to max-w-lg for
+//           comfier wrapping, and min-w-0 + break-words added on the
+//           recents/playlist containers and error text as belt-and-braces
 //   7.5 — yt-dlp compatibility: single tracks resolve by DOWNLOAD + CONVERT
 //           instead of proxying the extractor's stream URL. The old stream
 //           URLs were IP-locked (googlevideo bakes in the resolver's IP),
@@ -190,4 +205,4 @@
 
 export const APP_NAME = 'Open Visualization Engine'
 export const APP_SHORT = 'OVE'
-export const APP_VERSION = '7.5'
+export const APP_VERSION = '7.5.1'
diff --git a/worklog.md b/worklog.md
index 4f22273..530e0e7 100755
--- a/worklog.md
+++ b/worklog.md
@@ -2118,3 +2118,24 @@ Work Log:
 
 Stage Summary:
 - v7.5 shipped: music links now resolve by download-and-convert — the server runs the operator's command (audio-only, VBR-0 MP3, title preserved), serves the finished file same-origin with full Range support, and the Playing: label shows the video's real title. The three failure classes behind "media resource not suitable" (IP-locked URLs, URL expiry, webm/Opus containers) are gone by construction; bot-wall/stale-extractor self-healing is unchanged, over-long tracks answer honestly, a missing ffmpeg degrades to the legacy proxy, and playlist look-ahead leaves room for conversions.
+
+---
+Task ID: 33
+Agent: main (Z.ai Code)
+Task: v7.5.1 Link dialog width fix (user request, screenshot-backed): on the operator's VPS deployment the "Stream a music link" dialog rendered with its content stretching past the box — description, input + Load button, RECENT LINKS rows and footer all crossed the right border.
+
+Work Log:
+- Screenshot forensics (drive link → pixel analysis, no guesswork): the user runs the outline base + green accent, so the dialog box is a pure-black rounded rect defined by an emerald-800 border. Measured from pixels: border columns x=716/1203 (487 px ≈ 448 CSS px at 110 % zoom), yet content ran to x≈1247 — Load button and recent rows crossed the right border by ~44 px while the left padding was respected. Text did NOT wrap wrong — the CONTENT COLUMN itself was wider than the box.
+- Reproduced locally (agent-browser, seeded long recent titles): grid-template-columns on DialogContent measured 461.9 px inside the 448 px dialog; every child laid out at 462 px → 39 px past the border. Binary-search by hiding children: the plain recent-links wrapper DIV is the sole culprit; white-space:normal on its title spans drops the track to the perfect 398 px.
+- Root cause: DialogContent is display:grid with an IMPLICIT single column — the track sizes to the widest child's min-content. The recent rows' truncate spans are white-space:nowrap, and Chromium measures a nowrap flex item's FULL text width for the container's min-content (min-w-0 lets the span shrink at layout time but does not zero its min-content contribution through the block→flex chain) — one long saved title ("Bobby Foox — This Is Why We Can't Have Nice Things (Official Music Video)") measured ~462 px > 448 px dialog, blowing the track so EVERY child (not just the rows) laid out past the right border.
+- ui/dialog.tsx + ui/alert-dialog.tsx (shared fix, every dialog app-wide): the implicit column is now pinned to grid-cols-[minmax(0,1fr)] — minimum 0, sized to the free space, so nowrap content can never stretch a dialog past its border again; rows/lists simply truncate/wrap within the box.
+- link-dialog.tsx: sm:max-w-md → sm:max-w-lg (512 px — the library default, comfier for the long description + input row); min-w-0 on the recent-links and playlist containers (direct defense on the measured culprit); break-words on the error text (resolver errors can embed long URLs).
+- version.ts: APP_VERSION 7.5.1 + changelog. lint clean; tsc clean (pre-existing examples/skills only).
+
+E2E (agent-browser, ALL PASS):
+- Seeded the user's exact recent list (two "Bobby Foxx … (Official Music Video)" + 孟婆): dialog 512 px, track exactly 462 px = content box, ZERO overflowing children, long titles now end in "…" inside their rows. VLM on the fixed dialog (outline theme + green accent replicated): no element crosses the border, Load button comfortably inside, description wraps, ellipsis visible.
+- Responsive: 375 px viewport → dialog 343 px, track 293 px, zero overflow, fits viewport with margins.
+- Regression sweep: service-login dialog (most complex remaining dialog) 512 px / 462 px track / zero overflow; simple max-w-sm form dialogs structurally protected by the shared track cap. Test browser localStorage cleaned afterwards.
+
+Stage Summary:
+- v7.5.1 shipped: the Link dialog (and every other dialog) can no longer be stretched past its border by long unbreakable content — the shared dialog column is capped at the available width, the Link dialog is comfortably wider (512 px), long recent/playlist titles truncate with ellipsis, and error text with embedded URLs wraps. Deploy note: no server changes, pure client fix.