From f6b246ba44ce10c05600138ce531c28aa85927e9 Mon Sep 17 00:00:00 2001
From: Waleed <walif6@gmail.com>
Date: Tue, 12 May 2026 14:56:19 -0700
Subject: [PATCH] fix(docs): restore media centering and full-width intro image
 (#4570)

* fix(docs): restore media centering and full-width intro image

* fix(docs): drop overflow-hidden from intro media wrappers so focus ring is not clipped

* fix(docs): use inset focus ring on lightbox media so parent overflow-hidden cannot clip it

* fix(docs): drop focus ring on lightbox media to match original UI
---
 apps/docs/components/ui/image.tsx                | 4 ++--
 apps/docs/components/ui/video.tsx                | 7 +++++--
 apps/docs/content/docs/en/introduction/index.mdx | 4 ++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/docs/components/ui/image.tsx b/apps/docs/components/ui/image.tsx
index 311f1d649e..f667508a99 100644
--- a/apps/docs/components/ui/image.tsx
+++ b/apps/docs/components/ui/image.tsx
@@ -25,7 +25,7 @@ export function Image({
     <NextImage
       className={cn(
         'overflow-hidden rounded-xl border border-border object-cover',
-        enableLightbox && 'transition-opacity group-hover:opacity-95',
+        enableLightbox && 'cursor-pointer transition-opacity group-hover:opacity-95',
         className
       )}
       alt={alt}
@@ -41,7 +41,7 @@ export function Image({
           type='button'
           onClick={openLightbox}
           aria-label={`Open ${alt} in media viewer`}
-          className='group block w-full cursor-pointer rounded-xl p-0 text-left'
+          className='group contents'
         >
           {image}
         </button>
diff --git a/apps/docs/components/ui/video.tsx b/apps/docs/components/ui/video.tsx
index a4eb58dd3b..b4aee09475 100644
--- a/apps/docs/components/ui/video.tsx
+++ b/apps/docs/components/ui/video.tsx
@@ -45,7 +45,10 @@ export function Video({
       playsInline={playsInline}
       width={width}
       height={height}
-      className={cn(className, enableLightbox && 'transition-opacity group-hover:opacity-[0.97]')}
+      className={cn(
+        className,
+        enableLightbox && 'cursor-pointer transition-opacity group-hover:opacity-[0.97]'
+      )}
       src={getAssetUrl(src)}
     />
   )
@@ -57,7 +60,7 @@ export function Video({
           type='button'
           onClick={openLightbox}
           aria-label={`Open ${src} in media viewer`}
-          className='group block w-full cursor-pointer rounded-xl p-0 text-left'
+          className='group contents'
         >
           {video}
         </button>
diff --git a/apps/docs/content/docs/en/introduction/index.mdx b/apps/docs/content/docs/en/introduction/index.mdx
index 891667249f..b9e783df71 100644
--- a/apps/docs/content/docs/en/introduction/index.mdx
+++ b/apps/docs/content/docs/en/introduction/index.mdx
@@ -10,13 +10,13 @@ import { FAQ } from '@/components/ui/faq'
 
 Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. Create agents visually with the workflow builder, conversationally through Mothership, or programmatically with the API. Connect AI models, databases, APIs, and 1,000+ business tools to build agents that automate real work — from chatbots and compliance agents to data pipelines and ITSM automation.
 
-<div className="flex justify-center">
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
   <Image
     src="/static/introduction.png"
     alt="Sim visual workflow canvas"
     width={700}
     height={450}
-    className="my-6"
+    className="w-full"
   />
 </div>