diff --git a/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/components/VideoDownloadDialog.tsx b/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/components/VideoDownloadDialog.tsx
index e3474894..4b98e687 100644
--- a/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/components/VideoDownloadDialog.tsx
+++ b/src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/components/VideoDownloadDialog.tsx
@@ -252,48 +252,57 @@ export const VideoDownloadDialog = ({ fileBrowserManager }: VideoDownloadDialogP
               {entries.map((e, i) => (
                 <div
                   key={`${e.url}-${i}`}
-                  className="flex items-center gap-3 rounded-md border border-duck-dark/10 bg-background/40 p-2"
+                  /*
+                      A COLUMN, not a row. The title, the thumbnail and the button used to share one
+                      line, so a long title — which is most of them — competed with the button for width
+                      and won: `truncate` cannot bite while a sibling can be pushed out of the card.
+                      Split, the title has the whole width to truncate against and the button has a row
+                      it cannot be squeezed out of.
+                    */
+                  className="flex flex-col gap-2 rounded-md border border-duck-dark/10 bg-background/40 p-2"
                 >
-                  <div className="flex h-12 w-20 shrink-0 items-center justify-center overflow-hidden rounded bg-duck-dark/10">
-                    {e.status === 'loading' ? (
-                      <Loader2 size={16} className="animate-spin text-duck-dark/40" />
-                    ) : e.status === 'error' ? (
-                      <AlertCircle size={16} className="text-destructive/70" />
-                    ) : e.thumbnail && !audioOnly ? (
-                      <img src={e.thumbnail} alt="" className="h-full w-full object-cover" />
-                    ) : (
-                      <Music size={16} className="text-duck-dark/40" />
-                    )}
-                  </div>
+                  <div className="flex min-w-0 items-start gap-3">
+                    <div className="flex h-12 w-20 shrink-0 items-center justify-center overflow-hidden rounded bg-duck-dark/10">
+                      {e.status === 'loading' ? (
+                        <Loader2 size={16} className="animate-spin text-duck-dark/40" />
+                      ) : e.status === 'error' ? (
+                        <AlertCircle size={16} className="text-destructive/70" />
+                      ) : e.thumbnail && !audioOnly ? (
+                        <img src={e.thumbnail} alt="" className="h-full w-full object-cover" />
+                      ) : (
+                        <Music size={16} className="text-duck-dark/40" />
+                      )}
+                    </div>
 
-                  <div className="min-w-0 flex-1">
-                    {e.status === 'loading' ? (
-                      <div className="space-y-1.5">
-                        <div className="h-3 w-3/4 rounded bg-duck-dark/10" />
-                        <div className="h-2.5 w-1/3 rounded bg-duck-dark/10" />
-                      </div>
-                    ) : e.status === 'error' ? (
-                      <>
-                        <p className="truncate text-sm font-medium text-destructive">
-                          {t('videoDownload.couldNotFetch')}
-                        </p>
-                        <p className="truncate text-xs text-duck-dark/50">{e.error || e.url}</p>
-                      </>
-                    ) : (
-                      <>
-                        <p className="truncate text-sm font-medium text-duck-dark" title={e.title}>
-                          {e.title || e.url}
-                        </p>
-                        <p className="truncate text-xs text-duck-dark/50">
-                          {[e.uploader, fmtDuration(e.duration)].filter(Boolean).join(' · ')}
-                        </p>
-                        {e.dl === 'error' && <p className="truncate text-xs text-destructive">{e.dlError}</p>}
-                      </>
-                    )}
+                    <div className="min-w-0 flex-1">
+                      {e.status === 'loading' ? (
+                        <div className="space-y-1.5">
+                          <div className="h-3 w-3/4 rounded bg-duck-dark/10" />
+                          <div className="h-2.5 w-1/3 rounded bg-duck-dark/10" />
+                        </div>
+                      ) : e.status === 'error' ? (
+                        <>
+                          <p className="truncate text-sm font-medium text-destructive">
+                            {t('videoDownload.couldNotFetch')}
+                          </p>
+                          <p className="truncate text-xs text-duck-dark/50">{e.error || e.url}</p>
+                        </>
+                      ) : (
+                        <>
+                          <p className="truncate text-sm font-medium text-duck-dark" title={e.title}>
+                            {e.title || e.url}
+                          </p>
+                          <p className="truncate text-xs text-duck-dark/50">
+                            {[e.uploader, fmtDuration(e.duration)].filter(Boolean).join(' · ')}
+                          </p>
+                          {e.dl === 'error' && <p className="truncate text-xs text-destructive">{e.dlError}</p>}
+                        </>
+                      )}
+                    </div>
                   </div>
 
                   {e.status === 'ready' && (
-                    <div className="shrink-0">
+                    <div className="flex justify-end">
                       {e.dl === 'done' ? (
                         <span className="flex items-center gap-1 text-xs font-medium text-duck-teal">
                           <Check size={14} /> {t('videoDownload.saved')}