fix(embeds): video player iframe collapses to ~200px (use padding-top, not aspect-ratio)

The inline video embed container (EmbedMediaLandscape/Portrait) used CSS
aspect-ratio for its 16:9 / 9:16 box. An absolutely-positioned *replaced* element
— the player <iframe> (position:absolute; inset:0; width/height:100%) — collapses
to its ~200px intrinsic size inside an aspect-ratio box rather than filling it, so
after pressing play the YouTube/Vimeo player rendered at ~202x114 in the top-left of
the (correct) 600x340 facade box, leaving a wide gray gap. The click-to-play
facade uses an <img>, which doesn't hit this, so the pre-play preview looked fine.

Switch the video containers to the padding-top percentage hack (56.25% / 177.78%),
which derives a definite height from the definite width so the absolutely-positioned
iframe fills it reliably. Fullscreen override sets padding-top:0 + height:100vh.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/components/url-preview/UrlPreview.css.tsx

@@ -213,11 +213,16 @@ export const EmbedMediaLandscape = style([
   {
     position: 'relative',
     width: '100%',
-    aspectRatio: '16 / 9',
+    // 16:9 via the padding-top hack (56.25%), NOT `aspect-ratio`. An absolutely-
+    // positioned *replaced* element (the player <iframe>) collapses to its ~200px
+    // intrinsic size inside an `aspect-ratio` box; padding derives a definite height
+    // from the definite width so the iframe (inset:0) reliably fills it.
+    height: 0,
+    paddingTop: '56.25%',
     overflow: 'hidden',
     backgroundColor: color.Surface.Container,
     selectors: {
-      '&:fullscreen': { width: '100vw', height: '100vh', aspectRatio: 'auto' },
+      '&:fullscreen': { width: '100vw', height: '100vh', paddingTop: 0 },
     },
   },
 ]);
@@ -228,12 +233,14 @@ export const EmbedMediaPortrait = style([
     position: 'relative',
     width: toRem(300),
     maxWidth: '100%',
-    aspectRatio: '9 / 16',
+    // 9:16 via the padding-top hack (177.78%) — see EmbedMediaLandscape.
+    height: 0,
+    paddingTop: '177.78%',
     margin: '0 auto',
     overflow: 'hidden',
     backgroundColor: color.Surface.Container,
     selectors: {
-      '&:fullscreen': { width: '100vw', height: '100vh', aspectRatio: 'auto', margin: 0 },
+      '&:fullscreen': { width: '100vw', height: '100vh', paddingTop: 0, margin: 0 },
     },
   },
 ]);