From 7f69a47de7ecc5abca729c5a0c44e3862317810a Mon Sep 17 00:00:00 2001
From: Ruud Andriessen <ruud.andriessen@uipath.com>
Date: Fri, 16 Oct 2026 13:41:57 +0200
Subject: [PATCH] fix(apollo-vertex): keep docs examples within mobile
 viewports

The tabs (w-[400px]) and aspect-ratio (w-[450px]) examples used fixed widths
that pushed the page 51px and 101px wider than a 390px viewport. They now use
w-full with a max width, keeping the desktop size and shrinking on narrow screens.

The carousel arrows sit 48px outside the slide (shadcn default). The preview
frame now has px-14 so the arrows stay inside it, and the max-w-xs carousel
shrinks to fit on narrow viewports. The component positioning is unchanged.
---
 apps/apollo-vertex/content/docs/components/aspect-ratio.mdx | 2 +-
 apps/apollo-vertex/content/docs/components/carousel.mdx     | 2 +-
 apps/apollo-vertex/content/docs/components/tabs.mdx         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/apollo-vertex/content/docs/components/aspect-ratio.mdx b/apps/apollo-vertex/content/docs/components/aspect-ratio.mdx
index 933b30232..eeb4b72a9 100644
--- a/apps/apollo-vertex/content/docs/components/aspect-ratio.mdx
+++ b/apps/apollo-vertex/content/docs/components/aspect-ratio.mdx
@@ -6,7 +6,7 @@ description: "Displays content within a desired ratio."
 import { AspectRatio } from '@/registry/aspect-ratio/aspect-ratio'
 
 <Preview>
-  <div className="w-[450px]">
+  <div className="w-full max-w-[450px]">
     <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg overflow-hidden">
       <img
         src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
diff --git a/apps/apollo-vertex/content/docs/components/carousel.mdx b/apps/apollo-vertex/content/docs/components/carousel.mdx
index 76064e855..b41545e3c 100644
--- a/apps/apollo-vertex/content/docs/components/carousel.mdx
+++ b/apps/apollo-vertex/content/docs/components/carousel.mdx
@@ -6,7 +6,7 @@ description: "A carousel with motion and swipe built using Embla."
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/carousel/carousel'
 import { Card, CardContent } from '@/registry/card/card'
 
-<Preview className="flex justify-center">
+<Preview className="flex justify-center px-14">
   <Carousel className="w-full max-w-xs">
     <CarouselContent>
       {[1, 2, 3, 4, 5].map((num) => (
diff --git a/apps/apollo-vertex/content/docs/components/tabs.mdx b/apps/apollo-vertex/content/docs/components/tabs.mdx
index 4ea29eb2d..22e4f61e4 100644
--- a/apps/apollo-vertex/content/docs/components/tabs.mdx
+++ b/apps/apollo-vertex/content/docs/components/tabs.mdx
@@ -10,7 +10,7 @@ import { Input } from '@/registry/input/input'
 import { Label } from '@/registry/label/label'
 
 <Preview>
-  <Tabs defaultValue="account" className="w-[400px]">
+  <Tabs defaultValue="account" className="w-full max-w-[400px]">
     <TabsList className="grid w-full grid-cols-2">
       <TabsTrigger value="account">Account</TabsTrigger>
       <TabsTrigger value="password">Password</TabsTrigger>