fix(site): prevent images from overflowing on narrow viewports (#1302)

Co-authored-by: Claude <noreply@anthropic.com>

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}
+    />
   )
 }

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',