From c23e7c93d0a23aac6e1a4304a6e0b7f8fc163965 Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:03:34 -0700
Subject: [PATCH] Replace inline image styles with Tailwind classes

The assistant screenshots set width and height through the style prop,
which our own guidance now tells users to avoid because it can cause a
layout shift on page load. Arbitrary values make the style prop
unnecessary here.

Verified in a mint dev build: the classes resolve to
.mint-w-\[268px\] { width: 268px } with matching CSS generated.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 assistant/use.mdx | 28 ++++++----------------------
 1 file changed, 6 insertions(+), 22 deletions(-)

diff --git a/assistant/use.mdx b/assistant/use.mdx
index 318d92c1f2..ff1ce29170 100644
--- a/assistant/use.mdx
+++ b/assistant/use.mdx
@@ -24,40 +24,24 @@ The assistant appears in two locations: as a button next to the search bar and a
   <Frame caption="Assistant button next to the search bar.">
     <img
   src="/images/assistant/assistant-button-light.png"
-  className="block dark:hidden"
-  style={{
-    width: '268px',
-    height: 'auto',
-  }}
+  className="block dark:hidden w-[268px] h-auto"
   alt="Search bar and assistant button in light mode."
 />
 <img
   src="/images/assistant/assistant-button-dark.png"
-  className="hidden dark:block"
-  style={{
-    width: '268px',
-    height: 'auto',
-  }}
+  className="hidden dark:block w-[268px] h-auto"
   alt="Search bar and assistant button in dark mode."
 />
 </Frame>
 <Frame caption="Assistant button at the bottom of the page.">
 <img
   src="/images/assistant/assistant-bar-light.png"
-  className="block dark:hidden"
-  style={{
-    width: '268px',
-    height: 'auto',
-  }}
+  className="block dark:hidden w-[268px] h-auto"
   alt="Assistant bar in light mode."
 />
 <img
   src="/images/assistant/assistant-bar-dark.png"
-  className="hidden dark:block"
-  style={{
-    width: '268px',
-    height: 'auto',
-  }}
+  className="hidden dark:block w-[268px] h-auto"
   alt="Assistant bar in dark mode."
 />
 </Frame>
@@ -88,8 +72,8 @@ Highlight text on a page and click the **Add to assistant** button to open the a
 Click the **Ask Assistant** button in a code block to open the assistant chat panel and add the code block as context. You can add multiple code blocks or text snippets to the assistant's context.
 
 <Frame>
-<img src="/images/assistant/code-block-light.png" alt="The Ask Assistant button in a code block in light mode." className="block dark:hidden" />
-<img src="/images/assistant/code-block-dark.png" alt="The Ask Assistant button in a code block in dark mode." className="hidden dark:block" />
+<img src="/images/assistant/code-block-light.png" alt="The Ask Assistant button in a code block in light mode." className="block dark:hidden w-[268px] h-auto" />
+<img src="/images/assistant/code-block-dark.png" alt="The Ask Assistant button in a code block in dark mode." className="hidden dark:block w-[268px] h-auto" />
 </Frame>
 
 ## File attachments