fix(embeds): wider card for Tidal, declutter caption while video plays

- Widen the interactive-embed card to min(38rem, 94vw) so the Tidal player (and
  other audio/video embeds) has enough width.
- Hide the title/description caption while a video embed is playing, so the text
  below it stops squeezing the player small (Twitch).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-06 22:23:32 -04:00
parent fbaa921f83
commit 6f15f7f56e
2 changed files with 5 additions and 3 deletions
@@ -18,7 +18,7 @@ export const UrlPreview = style([
// so the player chrome / tweet content isn't cramped or clipped. Defined after // so the player chrome / tweet content isn't cramped or clipped. Defined after
// UrlPreview so its width wins the cascade. // UrlPreview so its width wins the cascade.
export const UrlPreviewWide = style({ export const UrlPreviewWide = style({
width: 'min(34rem, 92vw)', width: 'min(38rem, 94vw)',
}); });
export const UrlPreviewImg = style([ export const UrlPreviewImg = style([
@@ -1133,12 +1133,14 @@ function MediaEmbedCard({
</Chip> </Chip>
)} )}
</Box> </Box>
{title && ( {/* While a video plays, drop the title/description so the player isn't
squeezed by text below it. */}
{!(playing && video) && title && (
<Text truncate priority="400"> <Text truncate priority="400">
<b>{title}</b> <b>{title}</b>
</Text> </Text>
)} )}
{description && ( {!(playing && video) && description && (
<Text size="T200" priority="300"> <Text size="T200" priority="300">
<UrlPreviewDescription>{description}</UrlPreviewDescription> <UrlPreviewDescription>{description}</UrlPreviewDescription>
</Text> </Text>