Enable automatic zooming images by Duncanma · Pull Request #4776 · temporalio/documentation

Duncanma · 2026-06-26T16:08:39Z

Zoomable images (Stripe-style click-to-expand)

Summary

Large images (and diagrams) in the docs are now click-to-expand, matching the behavior on
Stripe's docs:

An image sits in the normal content column at its fitted size.
If the image is wider than the space available and would increase in size if we zoomed in, hovering it shows a zoom-in cursor and clicking opens a full-width modal of the image at full resolution.
Inside the modal the cursor is zoom-out; clicking the image, clicking the backdrop, pressing Escape, or the × button closes it and restores the page.
If the image already fits, nothing changes — no cursor change, no modal, no behavioral difference.
In some cases, generally due to viewport height, an image can't zoom any bigger while fitting in the browser window (imagine you have a 800px height browser, and a 1000px height image... even at a larger width, it's going to be scaled to that 800px height) and in those cases the zoom function will not be enabled.

The effect is automatic for every image in the docs. Authors do not need to do anything; whether an image is zoomable is decided at runtime by comparing the image's natural pixel width to the width it is actually displayed at.

Opting out: `<NoZoom>`

Some images are decorative (e.g. the SDK banners on the /develop landing pages) and should never expand, even though they are downscaled. Wrap them in <NoZoom> to disable the click-to-expand affordance:

<NoZoom>

![.NET](/img/assets/banner-dotnet-temporal.png)

</NoZoom>

<NoZoom> is registered globally (src/theme/MDXComponents.tsx), so no import is needed in .mdx files. It is also exported from src/components for explicit use.
Leave blank lines around the Markdown image inside the wrapper so MDX parses it as Markdown.
The wrapper can contain multiple images, links, or captioned images — everything inside it renders as a plain, non-zoomable image.
It works by providing a React context flag that ZoomableImage reads (useNoZoom()); when set, the overflow check never marks the image zoomable, so there is no zoom cursor and no modal.

All SDK banners under docs/develop/** are wrapped in <NoZoom>.

What changed (I haven't updated these paths after @flippedcoder's component refactor)

File	Change
`src/components/images/ZoomableImage.tsx` (new)	Core component. Detects overflow and renders the modal.
`src/components/images/ZoomableImage.module.css` (new)	Cursor, modal/backdrop, and `height: auto` styles.
`src/theme/MDXComponents.tsx`	Overrides the global `img` renderer, so every Markdown image (`![alt](src)`) flows through `ZoomableImage`; also registers `<NoZoom>` globally for opt-out.
`src/components/images/CaptionedImage.js`	Refactored to delegate to `ZoomableImage` while keeping captions and dark/light support.
`src/components/images/ZoomingImage.js`, `EnlargeImage.js`	Legacy components; kept working with their existing props but now open the shared modal instead of an inline toggle / new tab.
`src/components/images/NoZoom.tsx` (new)	Context wrapper that opts a subtree of images out of zoom.
`src/components/index.js`	Exports `ZoomableImage` and `NoZoom`.

How overflow is detected

On image load and whenever the column is resized (via a ResizeObserver), the component compares img.naturalWidth to the rendered img.clientWidth. The image is treated as zoomable only when it is being downscaled (naturalWidth > clientWidth). This is why the same image can be zoomable on a narrow laptop column (~630px) but not on a wide monitor (~1300px), and why high-resolution ("2x") screenshots — the bulk of our images — are zoomable.

Aspect-ratio fix (important)

Docusaurus adds intrinsic width and height attributes to Markdown images (to prevent layout shift). The stock theme image applies a class that forces height: auto, so the height scales with the width under max-width: 100%. ZoomableImage now applies the same height: auto rule (.image in its CSS module). Without it, images were rendered at their fitted width but full intrinsic height — visibly squished. If you ever see distorted images, this class is the first thing to check.

Benefits

Readable detail on dense screenshots. Many UI screenshots are 1600–4096px wide and get downscaled into a ~700px column; users can now open them at full resolution.
Zero author overhead. Works on existing and future Markdown images automatically — no new component to remember.
No false affordance. Images that already fit are completely untouched, so we don't invite clicks that do nothing.
One consistent interaction. The older EnlargeImage (opened a raw image in a new tab), ZoomingImage, and CaptionedImage zoom="true" (inline toggles) now share one modal.
Accessible modal. role="dialog", aria-modal, Escape to close, focusable close button, and body-scroll lock while open.

Note: dark/light images now load on demand (performance trade-off)

CaptionedImage supports a srcDark variant. The behavior changed:

Before: both the light and dark <img> were rendered into the DOM and swapped with CSS (visibility). Both files were downloaded up front, so toggling the site theme was instant.
Now: the active variant is chosen in JavaScript with useColorMode, so only the current theme's image is downloaded.

Trade-off: initial page load fetches one image instead of two (faster, less bandwidth). But if a reader switches the site theme while the page is open, the other variant has not been downloaded yet, so it is fetched on the spot — the swapped image may flash or appear blank for a moment on slow connections or for large files. The fetch is cached after the first switch. This only affects images that actually declare a srcDark; plain Markdown images have a single source and are unaffected.

(in my opinion, this is a fine tradeoff... less bandwidth for the vast majority of cases, I don't believe theme switching is a common activity)

How to test

yarn start and open a page with large images, e.g. /cloud/billing or /develop/go/client/temporal-client.
Hover an oversized image → cursor becomes zoom-in. Click → full-width modal opens. Click the image / backdrop / ×, or press Escape → it closes and the page scroll is restored.
Open a page whose images already fit → confirm there is no zoom cursor and clicking does nothing.
Aspect ratio: confirm images are not squished; compare against production (docs.temporal.io).
Responsive: narrow the browser window and reload — images that fit at full width become zoomable as the column shrinks.
Dark/light + captions: open /codec-server, toggle the navbar theme switch, and confirm the diagrams swap to their dark/light variants and the captions still render. Note the on-demand fetch described above on first toggle.

Pages affected

Pages that previously had explicit zoom — now use the shared modal

These already offered some form of "enlarge". Their interaction is now the unified click-to-expand modal.

Page	Previous mechanism
/develop/task-queue-priority-fairness	EnlargeImage — click opened the raw image in a new browser tab
/cloud/namespaces	ZoomingImage (thumbnail→inline) + CaptionedImage
/cloud/metrics/prometheus-grafana	ZoomingImage (thumbnail→inline)
/cloud/high-availability/ha-connectivity	CaptionedImage zoom="true" (inline toggle)
/cloud/migrate/migrate-within-cloud	CaptionedImage zoom="true" (inline toggle)
/nexus	CaptionedImage zoom="true" (inline toggle)
/nexus/execution-debugging	CaptionedImage zoom="true" (inline toggle)

Heads-up / follow-ups: the new logic only zooms images that genuinely overflow the column, so a few small images that were manually marked zoomable no longer zoom:

migrate-within-cloud.mdx — its four zoom="true" images are only 310–751px wide (they fit the column), so they no longer zoom. They'd need higher-resolution sources to be worth expanding.

namespaces.mdx — the ZoomingImage there (cloud-account-id.png, 218px) was a tiny thumbnail; expanding it is no longer meaningful. The large CaptionedImages on the same page do zoom.

sdk-metrics-setup.mdx — imports ZoomingImage but never renders it; the unused import can be removed.

Newly zoomable pages (44)

Pages that did not previously have any zoom but contain raster images ≥ 800px wide, which now expand when downscaled. Grouped by area; the width shown is the page's largest image.

The 60 SDK landing pages under /develop/** whose only large image was the shared 1800px banner are excluded: those banners are now wrapped in <NoZoom> (see "Opting out" above), so they no longer zoom.

Encyclopedia

/nexus/operations — max 3304px
/handling-messages — max 2006px
/nexus/registry — max 1858px
/nexus/security — max 1342px
/activity-definition — max 1154px
/task-queue — max 942px
/encyclopedia/retry-policies — max 800px

Evaluate

/cloud/limits — max 2752px

Production deployment

/self-hosted-guide/monitoring — max 2750px
/self-hosted-guide/server-frontend-api-reference — max 2148px
/production-deployment/data-encryption — max 2004px
/self-hosted-guide/security — max 1407px

The page lists above cover raster images (PNG/JPG/etc.), which are the large screenshots that motivated this change. SVG diagrams are vector and stay crisp at any size; they only trigger the zoom affordance if they declare an intrinsic width larger than the column, and expanding them adds little.

vercel · 2026-06-26T16:08:46Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
temporal-documentation	Ready	Preview, Comment	Jul 16, 2026 8:00pm

github-actions · 2026-06-26T16:09:07Z

📖 Docs PR preview links

Design Patterns
- Early Return + Local Activities
Develop
- .NET SDK
  - Activities
  - Best Practices
  - Client
  - Client
  - Nexus
  - Workers
  - Workflows
- Go SDK
  - Activities
  - Best Practices
  - Client
  - Client
  - Nexus
  - Workers
  - Workflows
- Java SDK
  - Activities
  - Best practices
  - Client
  - Client
  - Nexus
  - Nexus
  - Nexus
- PHP SDK
  - Activities
  - Best Practices
  - Client
  - Client
  - Workers
  - Workflows
- Python SDK
  - Activities
  - Best Practices
  - Client
  - Client
  - Nexus
  - Workers
  - Workflows
- Ruby SDK
  - Activities
  - Best Practices
  - Client
  - Client
  - Workers
  - Workflows
- Rust SDK
  - Activities
  - Client
  - Nexus
  - Workers
  - Workflows
- TypeScript SDK
  - Best practices
  - Client
  - Client
  - Nexus
  - Workers
  - Workflows
  - Workflows
Evaluate
- Temporal Nexus
Standalone Activity

…ge in <NoZoom></NoZoom>

# Conflicts: # src/components/elements/Images/NoZoom.tsx # src/components/elements/Images/ZoomableImage.module.css # src/components/elements/Images/ZoomableImage.tsx # src/components/images/ZoomingImage.js # src/components/index.js

github-actions

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

vale

readme/ZOOMABLE_IMAGES.md|140 col 62| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/dotnet/best-practices/converters-and-encryption'.
readme/ZOOMABLE_IMAGES.md|144 col 40| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/go/client/temporal-client'.
readme/ZOOMABLE_IMAGES.md|145 col 37| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/go/nexus/feature-guide'.
readme/ZOOMABLE_IMAGES.md|146 col 47| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/go/data-handling/data-conversion'.
readme/ZOOMABLE_IMAGES.md|150 col 42| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/java/client/temporal-client'.
readme/ZOOMABLE_IMAGES.md|151 col 39| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/java/nexus/feature-guide'.
readme/ZOOMABLE_IMAGES.md|152 col 60| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/java/best-practices/converters-and-encryption'.
readme/ZOOMABLE_IMAGES.md|156 col 44| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/python/client/temporal-client'.
readme/ZOOMABLE_IMAGES.md|157 col 41| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/python/nexus/feature-guide'.
readme/ZOOMABLE_IMAGES.md|161 col 42| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/ruby/client/temporal-client'.
readme/ZOOMABLE_IMAGES.md|162 col 60| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/ruby/best-practices/converters-and-encryption'.
readme/ZOOMABLE_IMAGES.md|166 col 48| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/typescript/client/temporal-client'.
readme/ZOOMABLE_IMAGES.md|167 col 45| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/typescript/nexus/feature-guide'.
readme/ZOOMABLE_IMAGES.md|168 col 50| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/typescript/best-practices/debugging'.
readme/ZOOMABLE_IMAGES.md|172 col 23| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/nexus/operations'.
readme/ZOOMABLE_IMAGES.md|173 col 24| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/handling-messages'.
readme/ZOOMABLE_IMAGES.md|174 col 21| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/nexus/registry'.
readme/ZOOMABLE_IMAGES.md|175 col 21| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/nexus/security'.
readme/ZOOMABLE_IMAGES.md|176 col 26| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/activity-definition'.
readme/ZOOMABLE_IMAGES.md|177 col 17| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/task-queue'.
readme/ZOOMABLE_IMAGES.md|178 col 34| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/encyclopedia/retry-policies'.
readme/ZOOMABLE_IMAGES.md|182 col 19| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/cloud/limits'.
readme/ZOOMABLE_IMAGES.md|186 col 35| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/self-hosted-guide/monitoring'.
readme/ZOOMABLE_IMAGES.md|187 col 54| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/self-hosted-guide/server-frontend-api-reference'.
readme/ZOOMABLE_IMAGES.md|188 col 44| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/production-deployment/data-encryption'.
readme/ZOOMABLE_IMAGES.md|189 col 33| [Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/self-hosted-guide/security'.

github-actions · 2026-07-16T17:15:06Z

@@ -0,0 +1,193 @@
+# Zoomable images (Stripe-style click-to-expand)


📝 [vale] _{reported by reviewdog 🐶}
[Temporal.Headings] 'Zoomable images (Stripe-style click-to-expand)' should use sentence-style capitalization.

github-actions · 2026-07-16T17:15:06Z

+
+## How to test
+
+1. `yarn start` and open a page with large images, e.g. [`/cloud/billing`](https://docs.temporal.io/cloud/billing) or [`/develop/go/client/temporal-client`](https://docs.temporal.io/develop/go/client/temporal-client).


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/cloud/billing'.

github-actions · 2026-07-16T17:15:06Z

+
+## How to test
+
+1. `yarn start` and open a page with large images, e.g. [`/cloud/billing`](https://docs.temporal.io/cloud/billing) or [`/develop/go/client/temporal-client`](https://docs.temporal.io/develop/go/client/temporal-client).


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/go/client/temporal-client'.

github-actions · 2026-07-16T17:15:06Z

+1. `yarn start` and open a page with large images, e.g. [`/cloud/billing`](https://docs.temporal.io/cloud/billing) or [`/develop/go/client/temporal-client`](https://docs.temporal.io/develop/go/client/temporal-client).
+2. Hover an oversized image → cursor becomes `zoom-in`. Click → full-width modal opens. Click the image / backdrop / `×`, or press `Escape` → it closes and the page scroll is restored.
+3. Open a page whose images already fit → confirm there is **no** zoom cursor and clicking does nothing.
+4. **Aspect ratio:** confirm images are not squished; compare against production ([docs.temporal.io](https://docs.temporal.io)).


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io'.

github-actions · 2026-07-16T17:15:06Z

+3. Open a page whose images already fit → confirm there is **no** zoom cursor and clicking does nothing.
+4. **Aspect ratio:** confirm images are not squished; compare against production ([docs.temporal.io](https://docs.temporal.io)).
+5. **Responsive:** narrow the browser window and reload — images that fit at full width become zoomable as the column shrinks.
+6. **Dark/light + captions:** open [`/codec-server`](https://docs.temporal.io/codec-server), toggle the navbar theme switch, and confirm the diagrams swap to their dark/light variants and the captions still render. Note the on-demand fetch described above on first toggle.


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/codec-server'.

github-actions · 2026-07-16T17:15:07Z

+- [/cloud/export/aws-export-s3](https://docs.temporal.io/cloud/export/aws-export-s3) — _max 1981px_
+- [/cloud/nexus](https://docs.temporal.io/cloud/nexus) — _max 1714px_
+- [/cloud/terraform-provider](https://docs.temporal.io/cloud/terraform-provider) — _max 1478px_
+- [/cloud/migrate/automated](https://docs.temporal.io/cloud/migrate/automated) — _max 1202px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/cloud/migrate/automated'.

github-actions · 2026-07-16T17:15:07Z

+- [/cloud/nexus](https://docs.temporal.io/cloud/nexus) — _max 1714px_
+- [/cloud/terraform-provider](https://docs.temporal.io/cloud/terraform-provider) — _max 1478px_
+- [/cloud/migrate/automated](https://docs.temporal.io/cloud/migrate/automated) — _max 1202px_
+- [/cloud/api-keys](https://docs.temporal.io/cloud/api-keys) — _max 822px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/cloud/api-keys'.

github-actions · 2026-07-16T17:15:07Z

+
+#### Develop
+
+- [/develop/worker-performance](https://docs.temporal.io/develop/worker-performance) — _max 2248px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/worker-performance'.

github-actions · 2026-07-16T17:15:07Z

+
+#### Develop — dotnet
+
+- [/develop/dotnet/client/temporal-client](https://docs.temporal.io/develop/dotnet/client/temporal-client) — _max 4096px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/dotnet/client/temporal-client'.

github-actions · 2026-07-16T17:15:07Z

+#### Develop — dotnet
+
+- [/develop/dotnet/client/temporal-client](https://docs.temporal.io/develop/dotnet/client/temporal-client) — _max 4096px_
+- [/develop/dotnet/nexus/feature-guide](https://docs.temporal.io/develop/dotnet/nexus/feature-guide) — _max 3542px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/dotnet/nexus/feature-guide'.

…size before decided to enable zoom... if, due to height for example, the image will not actually get bigger, then skip the zoom cursor/action

github-actions · 2026-07-16T19:22:30Z

+
+- [/develop/dotnet/client/temporal-client](https://docs.temporal.io/develop/dotnet/client/temporal-client) — _max 4096px_
+- [/develop/dotnet/nexus/feature-guide](https://docs.temporal.io/develop/dotnet/nexus/feature-guide) — _max 3542px_
+- [/develop/dotnet/best-practices/converters-and-encryption](https://docs.temporal.io/develop/dotnet/best-practices/converters-and-encryption) — _max 1320px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/dotnet/best-practices/converters-and-encryption'.

github-actions · 2026-07-16T19:22:30Z

+
+#### Develop — go
+
+- [/develop/go/client/temporal-client](https://docs.temporal.io/develop/go/client/temporal-client) — _max 4096px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/go/client/temporal-client'.

github-actions · 2026-07-16T19:22:30Z

+#### Develop — go
+
+- [/develop/go/client/temporal-client](https://docs.temporal.io/develop/go/client/temporal-client) — _max 4096px_
+- [/develop/go/nexus/feature-guide](https://docs.temporal.io/develop/go/nexus/feature-guide) — _max 3542px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/go/nexus/feature-guide'.

github-actions · 2026-07-16T19:22:30Z

+
+- [/develop/go/client/temporal-client](https://docs.temporal.io/develop/go/client/temporal-client) — _max 4096px_
+- [/develop/go/nexus/feature-guide](https://docs.temporal.io/develop/go/nexus/feature-guide) — _max 3542px_
+- [/develop/go/data-handling/data-conversion](https://docs.temporal.io/develop/go/data-handling/data-conversion) — _max 1320px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/go/data-handling/data-conversion'.

github-actions · 2026-07-16T19:22:30Z

+
+#### Develop — java
+
+- [/develop/java/client/temporal-client](https://docs.temporal.io/develop/java/client/temporal-client) — _max 4096px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/develop/java/client/temporal-client'.

github-actions · 2026-07-16T19:22:31Z

+
+#### Evaluate
+
+- [/cloud/limits](https://docs.temporal.io/cloud/limits) — _max 2752px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/cloud/limits'.

github-actions · 2026-07-16T19:22:31Z

+
+#### Production deployment
+
+- [/self-hosted-guide/monitoring](https://docs.temporal.io/self-hosted-guide/monitoring) — _max 2750px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/self-hosted-guide/monitoring'.

github-actions · 2026-07-16T19:22:31Z

+#### Production deployment
+
+- [/self-hosted-guide/monitoring](https://docs.temporal.io/self-hosted-guide/monitoring) — _max 2750px_
+- [/self-hosted-guide/server-frontend-api-reference](https://docs.temporal.io/self-hosted-guide/server-frontend-api-reference) — _max 2148px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/self-hosted-guide/server-frontend-api-reference'.

github-actions · 2026-07-16T19:22:31Z

+
+- [/self-hosted-guide/monitoring](https://docs.temporal.io/self-hosted-guide/monitoring) — _max 2750px_
+- [/self-hosted-guide/server-frontend-api-reference](https://docs.temporal.io/self-hosted-guide/server-frontend-api-reference) — _max 2148px_
+- [/production-deployment/data-encryption](https://docs.temporal.io/production-deployment/data-encryption) — _max 2004px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/production-deployment/data-encryption'.

github-actions · 2026-07-16T19:22:31Z

+- [/self-hosted-guide/monitoring](https://docs.temporal.io/self-hosted-guide/monitoring) — _max 2750px_
+- [/self-hosted-guide/server-frontend-api-reference](https://docs.temporal.io/self-hosted-guide/server-frontend-api-reference) — _max 2148px_
+- [/production-deployment/data-encryption](https://docs.temporal.io/production-deployment/data-encryption) — _max 2004px_
+- [/self-hosted-guide/security](https://docs.temporal.io/self-hosted-guide/security) — _max 1407px_


⚠️ [vale] _{reported by reviewdog 🐶}
[Temporal.RelativeLinks] Use a relative path instead of the absolute docs.temporal.io URL 'https://docs.temporal.io/self-hosted-guide/security'.

…to hopefully catch future issues

…le_flags for proper sync functionality.

flippedcoder · 2026-07-16T20:19:08Z

+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0


I think this could be actions/checkout@7 unless we need this specific version.

flippedcoder · 2026-07-16T20:19:27Z

+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+
+      - name: Setup Node.js Environment
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0


Suggested change

uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0

uses: actions/setup-node@6

Enable automatic zooming images

4e13521

Merge branch 'main' into zoomable_images

3b14360

vercel Bot deployed to Preview June 26, 2026 16:10 View deployment

added the ability to opt-out of the automatic zoom by wrapping an ima…

909036c

…ge in <NoZoom></NoZoom>

vercel Bot deployed to Preview June 26, 2026 18:04 View deployment

Merge branch 'main' into zoomable_images

cd53193

vercel Bot deployed to Preview June 26, 2026 19:08 View deployment

sync-by-unito Bot assigned Duncanma Jun 30, 2026

Update the markdown details

8671a11

vercel Bot deployed to Preview July 16, 2026 16:13 View deployment

moved zoomable images read me

92502fc

vercel Bot deployed to Preview July 16, 2026 16:32 View deployment

fixing a lack of centering

f3bd7e5

vercel Bot deployed to Preview July 16, 2026 17:06 View deployment

Merge branch 'main' into zoomable_images

f13a6fd

# Conflicts: # src/components/elements/Images/NoZoom.tsx # src/components/elements/Images/ZoomableImage.module.css # src/components/elements/Images/ZoomableImage.tsx # src/components/images/ZoomingImage.js # src/components/index.js

github-actions Bot reviewed Jul 16, 2026

View reviewed changes

vercel Bot deployed to Preview July 16, 2026 17:18 View deployment

Updated to handle mermaid diagrams, and also to calculate the zoomed …

1883a0e

…size before decided to enable zoom... if, due to height for example, the image will not actually get bigger, then skip the zoom cursor/action

github-actions Bot reviewed Jul 16, 2026

View reviewed changes

vercel Bot deployed to Preview July 16, 2026 19:23 View deployment

Duncanma marked this pull request as ready for review July 16, 2026 19:37

Duncanma requested a review from a team as a code owner July 16, 2026 19:37

Merge branch 'main' into zoomable_images

0e6ab9d

Duncanma enabled auto-merge (squash) July 16, 2026 19:37

vercel Bot deployed to Preview July 16, 2026 19:38 View deployment

Found a broken mermaid diagram, fixed it, but also added a lint step …

c0f7473

…to hopefully catch future issues

vercel Bot deployed to Preview July 16, 2026 19:55 View deployment

Refactor Vale CI workflow to scope linting to docs only and adjust va…

86d4ef8

…le_flags for proper sync functionality.

vercel Bot deployed to Preview July 16, 2026 19:58 View deployment

Merge branch 'main' into zoomable_images

7503705

vercel Bot deployed to Preview July 16, 2026 20:00 View deployment

flippedcoder approved these changes Jul 16, 2026

View reviewed changes

Duncanma merged commit ba0b085 into main Jul 16, 2026
13 checks passed

Duncanma deleted the zoomable_images branch July 16, 2026 20:25

Duncanma mentioned this pull request Jul 16, 2026

Update image zooming & enable a similar feature for mermaid diagrams #4881

Closed

1 task

		@@ -0,0 +1,193 @@
		# Zoomable images (Stripe-style click-to-expand)


		## How to test

		1. `yarn start` and open a page with large images, e.g. [`/cloud/billing`](https://docs.temporal.io/cloud/billing) or [`/develop/go/client/temporal-client`](https://docs.temporal.io/develop/go/client/temporal-client).


		#### Develop

		- [/develop/worker-performance](https://docs.temporal.io/develop/worker-performance) — _max 2248px_


		#### Develop — dotnet

		- [/develop/dotnet/client/temporal-client](https://docs.temporal.io/develop/dotnet/client/temporal-client) — _max 4096px_


		#### Develop — go

		- [/develop/go/client/temporal-client](https://docs.temporal.io/develop/go/client/temporal-client) — _max 4096px_


		#### Develop — java

		- [/develop/java/client/temporal-client](https://docs.temporal.io/develop/java/client/temporal-client) — _max 4096px_


		#### Evaluate

		- [/cloud/limits](https://docs.temporal.io/cloud/limits) — _max 2752px_


		#### Production deployment

		- [/self-hosted-guide/monitoring](https://docs.temporal.io/self-hosted-guide/monitoring) — _max 2750px_

	uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
	uses: actions/setup-node@6

Uh oh!

Conversation

Duncanma commented Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Zoomable images (Stripe-style click-to-expand)

Summary

Opting out: <NoZoom>

What changed (I haven't updated these paths after @flippedcoder's component refactor)

How overflow is detected

Aspect-ratio fix (important)

Benefits

Note: dark/light images now load on demand (performance trade-off)

How to test

Pages affected

Pages that previously had explicit zoom — now use the shared modal

Newly zoomable pages (44)

Best practices

Temporal Cloud

Develop

Develop — dotnet

Develop — go

Develop — java

Develop — python

Develop — ruby

Develop — typescript

Encyclopedia

Evaluate

Production deployment

Uh oh!

vercel Bot commented Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📖 Docs PR preview links

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 16, 2026

Choose a reason for hiding this comment

Duncanma commented Jun 26, 2026 •

edited

Loading

Opting out: `<NoZoom>`

vercel Bot commented Jun 26, 2026 •

edited

Loading

github-actions Bot commented Jun 26, 2026 •

edited

Loading