From 9efc2ac118f301b26c0e730ae5637f3d6366e442 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Mon, 13 Apr 2026 10:50:22 -0500
Subject: [PATCH] fix(site): prevent images from overflowing on narrow
 viewports (#1302)

Co-authored-by: Claude <noreply@anthropic.com>
---
 site/src/components/typography/Img.astro       | 14 +++++++++++---
 site/src/components/typography/styles.ts       |  2 +-
 site/src/content/docs/how-to/build-with-ai.mdx |  7 ++++---
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/site/src/components/typography/Img.astro b/site/src/components/typography/Img.astro
index 6bbe5a5b..4adffd78 100644
--- a/site/src/components/typography/Img.astro
+++ b/site/src/components/typography/Img.astro
@@ -12,9 +12,17 @@ const isRemote = typeof src === 'string' && src.startsWith('http');
 
 {
   isRemote ? (
-    <img class={twMerge("my-8", className)} src={src} {...rest} />
+    <img
+      class={twMerge("my-8 h-auto max-w-full", className)}
+      src={src}
+      {...rest}
+    />
   ) : (
-    // @ts-expect-error tbh I don't know how to tell ts that inferSize is ok
-    <Image class={twMerge("my-8", className)} inferSize src={src} {...rest} />
+    <Image
+      class={twMerge("my-8 h-auto max-w-full", className)}
+      inferSize
+      src={src}
+      {...rest}
+    />
   )
 }
diff --git a/site/src/components/typography/styles.ts b/site/src/components/typography/styles.ts
index 01b5cd69..dfd49d84 100644
--- a/site/src/components/typography/styles.ts
+++ b/site/src/components/typography/styles.ts
@@ -7,7 +7,7 @@
  */
 export const shared = {
   a: 'underline intent:no-underline',
-  code: 'border border-manila-75 bg-manila-25 dark:bg-soot dark:border-warm-gray px-1 rounded font-mono text-code normal-case',
+  code: 'border border-manila-75 bg-manila-25 dark:bg-soot dark:border-warm-gray px-1 rounded font-mono text-code normal-case break-words',
   codeBlock: 'font-mono text-code text-manila-light',
   pre: 'shiki astro-code',
   em: 'italic',
diff --git a/site/src/content/docs/how-to/build-with-ai.mdx b/site/src/content/docs/how-to/build-with-ai.mdx
index 880912a6..426782bf 100644
--- a/site/src/content/docs/how-to/build-with-ai.mdx
+++ b/site/src/content/docs/how-to/build-with-ai.mdx
@@ -3,9 +3,10 @@ title: 'Build with AI'
 description: 'How to give AI tools the context they need to build Video.js players alongside you'
 ---
 
-import { Image } from 'astro:assets';
+import ContentWidth from '@/components/frames/ContentWidth.astro';
 import FrameworkCase from '@/components/docs/FrameworkCase.astro';
 import CopyMarkdownButton from '@/components/CopyMarkdownButton.tsx';
+import Img from '@/components/typography/Img.astro';
 import markdownNegotiation from '@/assets/docs/how-to/build-with-ai/markdown-negotiation.png';
 
 Video.js publishes all of its documentation in AI-friendly formats. This page covers how to feed that documentation to your tools.
@@ -25,7 +26,7 @@ Every doc page is available as markdown, so you can provide your model with focu
 
 2. **`Accept: text/markdown` header**: AI tools that send this header when fetching a Video.js doc URL will receive markdown instead of HTML.
 
-   <Image src={markdownNegotiation} alt="Fetching a doc URL returns 188.7KB of HTML; fetching the same URL with .md returns 3.4KB of markdown" inferSize class="max-w-md" />
+   <ContentWidth><Img src={markdownNegotiation} alt="Fetching a doc URL returns 188.7KB of HTML; fetching the same URL with .md returns 3.4KB of markdown" class="w-full max-w-md" /></ContentWidth>
 3. **Add `.md` to any URL**: append `.md` to any doc URL to get its markdown directly. For example, the PlayButton reference is available at [`videojs.org/docs/framework/react/reference/play-button.md`](https://videojs.org/docs/framework/react/reference/play-button.md).
 </FrameworkCase>
 
@@ -36,7 +37,7 @@ Every doc page is available as markdown, so you can provide your model with focu
 
 2. **`Accept: text/markdown` header**: AI tools that send this header when fetching a Video.js doc URL will receive markdown instead of HTML.
 
-   <Image src={markdownNegotiation} alt="Fetching a doc URL returns 188.7KB of HTML; fetching the same URL with .md returns 3.4KB of markdown" inferSize />
+   <ContentWidth><Img src={markdownNegotiation} alt="Fetching a doc URL returns 188.7KB of HTML; fetching the same URL with .md returns 3.4KB of markdown" class="w-full max-w-md" /></ContentWidth>
 3. **Add `.md` to any URL**: append `.md` to any doc URL to get its markdown directly. For example, the PlayButton reference is available at [`videojs.org/docs/framework/html/reference/play-button.md`](https://videojs.org/docs/framework/html/reference/play-button.md).
 </FrameworkCase>