fix(docs): unblock prerender by closing Image JSX without blank lines (#48465)

## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?

Docs production builds can fail during prerender with:

`TypeError: Cannot read properties of undefined (reading 'children')`

Seen on `/guides/ai/going-to-prod` (and the same pattern exists on
several other guides).

Root cause: blank lines inside MDX JSX such as `<Image ...>` make the
MDX parser treat the element as closed early, which corrupts the AST.
Separately, `apps/docs/components/Image.tsx` forwarded accidental
`children` (and could overwrite `src`) onto `next/image`.

## What is the new behavior?

- Remove blank lines before the closing `/>` on the affected guide MDX
files so the JSX stays one element.
- Make the docs `Image` wrapper drop `children` and keep `src` from
props only, so a bad MDX tree is less likely to crash the build.

## Additional context

Split out of #48428 so that PR stays focused on Admonition/Alert
typography.

### To test

1. Check out this branch and run the docs app locally (`apps/docs`), or
wait for the Vercel docs preview on this PR.
2. Confirm these pages render without a prerender / `children` crash:
-
[/docs/guides/ai/going-to-prod](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/ai/going-to-prod)
-
[/docs/guides/ai/engineering-for-scale](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/ai/engineering-for-scale)
-
[/docs/guides/ai/choosing-compute-addon](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/ai/choosing-compute-addon)
-
[/docs/guides/ai/vector-indexes/hnsw-indexes](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/ai/vector-indexes/hnsw-indexes)
-
[/docs/guides/database/orioledb](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/database/orioledb)
-
[/docs/guides/database/connecting-to-postgres](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/database/connecting-to-postgres)
-
[/docs/guides/telemetry/reports](https://docs-git-fix-docs-image-mdx-blank-lines-supabase.vercel.app/docs/guides/telemetry/reports)
3. Spot-check that the guide images still show at the expected size (no
broken/missing images from the `Image` wrapper change).
4. Confirm Docs CI / Vercel docs build passes on this PR (this was the
failure mode on master-ish builds).

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added zoomable behavior to the Disk Size chart, with optimized light
and dark theme images.

* **Bug Fixes**
* Improved image rendering in documentation pages by handling captions,
styling, and MDX content more reliably.
* Corrected image markup formatting across multiple guides to ensure
content parses and displays correctly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/docs/components/Image.tsx

@@ -41,22 +41,33 @@ export interface ImageProps extends Omit<NextImageProps, 'src'> {
  * making sure it doesn't affect other projects consuming the component.
  *
  */
-const Image = ({ src, alt = '', ...props }: ImageProps) => {
+const Image = ({
+  src,
+  alt = '',
+  className,
+  style,
+  containerClassName,
+  caption,
+  // MDX can pass whitespace-only children (e.g. a blank line before `/>`);
+  // never forward those to next/image.
+  children: _children,
+  ...rest
+}: ImageProps) => {
   const { resolvedTheme } = useTheme()
   const source =
     typeof src === 'string' ? src : resolvedTheme?.includes('dark') ? src.dark : src.light
 
   return (
-    <figure className={props.containerClassName}>
+    <figure className={containerClassName}>
       <NextImage
         key={resolvedTheme}
         alt={alt}
         src={source}
-        className={props.className}
-        style={props.style}
-        {...props}
+        className={className}
+        style={style}
+        {...rest}
       />
-      {props.caption && <figcaption className="text-center">{props.caption}</figcaption>}
+      {caption && <figcaption className="text-center">{caption}</figcaption>}
     </figure>
   )
 }

apps/docs/content/guides/ai/choosing-compute-addon.mdx

@@ -130,7 +130,6 @@ The chart below compares HNSW queries-per-second across compute sizes for differ
   }}
   width={1427}
   height={862}
-
 />
 
 ## IVFFlat
@@ -268,7 +267,6 @@ The chart below plots requests-per-second against compute size.
   }}
   width={1427}
   height={862}
-
 />
 
 <Admonition type="note">
@@ -308,7 +306,6 @@ The chart below shows how the HNSW build parameters `m` and `ef_construction` af
   }}
   width={1052}
   height={796}
-
 />
 
 </TabPanel>
@@ -324,7 +321,6 @@ The chart below shows how the number of IVFFlat lists affects performance for on
   }}
   width={1032}
   height={796}
-
 />
 
 </TabPanel>
@@ -345,7 +341,6 @@ We follow techniques outlined in the [ANN Benchmarks](https://github.com/erikber
   className="max-h-[650px]"
   width={1196}
   height={1194}
-
 />
 
 _The diagram above shows the vecs benchmark setup: a Python test runner uploads data, builds the index, and runs queries against pgvector._

apps/docs/content/guides/ai/engineering-for-scale.mdx

@@ -24,7 +24,6 @@ The diagram below shows a single database holding the three vector collections o
   }}
   width={1600}
   height={1145}
-
 />
 
 For example, with 3 collections, called `docs`, `posts`, and `images`, we could expose the "docs" inside the public schema like this:
@@ -63,7 +62,6 @@ The diagram below shows a primary database alongside separate secondary "pod" da
   }}
   width={1600}
   height={1641}
-
 />
 
 You can use as many secondary databases as you need to manage your collections. With this architecture, you have 2 options for accessing collections within your application:
@@ -148,5 +146,4 @@ This diagram below provides an example architecture that allows you to access th
   }}
   width={1600}
   height={1754}
-
 />

apps/docs/content/guides/ai/going-to-prod.mdx

@@ -36,7 +36,6 @@ On the other hand, if you need to scale your application, you will need to [crea
   }}
   width={1052}
   height={796}
-
 />
 
 ## HNSW, understanding `ef_construction`, `ef_search`, and `m`
@@ -59,7 +58,6 @@ Search parameters:
   }}
   width={1052}
   height={796}
-
 />
 
 ## IVFFlat, understanding `probes` and `lists`
@@ -84,7 +82,6 @@ The chart below shows how the IVFFlat lists count affects accuracy and queries-p
   }}
   width={1467}
   height={808}
-
 />
 
 ## Performance tips when using indexes
@@ -129,5 +126,4 @@ The chart below plots requests-per-second against compute size.
   }}
   width={1427}
   height={862}
-
 />

apps/docs/content/guides/ai/vector-indexes/hnsw-indexes.mdx

@@ -101,7 +101,6 @@ The diagram below shows a navigable small world graph. Each node connects to nea
   className="max-h-[600px] mx-auto"
   width={1016}
   height={759}
-
 />
 
 The “navigable” part of NSW specifically refers to the ability to logarithmically scale the greedy search algorithm on the graph, an algorithm that attempts to make only the locally optimal choice at each hop. Without this property, the graph may still be considered a small world with short paths between far-away nodes, but the greedy algorithm tends to miss them. Greedy search is ideal for NSW because it is quick to navigate and has low computational costs.

apps/docs/content/guides/database/connecting-to-postgres.mdx

@@ -168,7 +168,6 @@ Server-side poolers, such as Supabase's [Supavisor](https://github.com/supabase/
   width={1851}
   height={907}
   caption="Connecting to the database directly vs using a Connection Pooler"
-
 />
 
 They maintain hot connections with the database and intelligently share them with clients only when needed, maximizing the amount of queries a single connection can service. They're best used to manage queries from auto-scaling systems, such as edge and serverless functions.

apps/docs/content/guides/database/orioledb.mdx

@@ -14,7 +14,6 @@ OrioleDB addresses Postgres's scalability limitations by removing bottlenecks in
   className="max-w-[550px] mx-auto! border rounded-md"
   width={1000}
   height={609}
-
 />
 
 <Admonition type="note">

apps/docs/content/guides/monitoring-and-debugging/reports.mdx

@@ -283,7 +283,6 @@ src={{
     dark: '/docs/img/database/reports/disk-size-chart-dark.png',
     light: '/docs/img/database/reports/disk-size-chart-light.png',
   }}
-
 />
 
 | Component    | Description                                               |