From 35f1b787e2e32264da870053159807f222a9ca7b Mon Sep 17 00:00:00 2001
From: Akash Hamirwasia <akash.hamirwasia@razorpay.com>
Date: Thu, 21 Dec 2023 00:51:54 +0530
Subject: [PATCH] fix(docs): horizontal overflow in preview on mobile devices

---
 apps/docs/src/components/PreviewComponent.tsx | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/docs/src/components/PreviewComponent.tsx b/apps/docs/src/components/PreviewComponent.tsx
index a6ffeaa..660eed5 100644
--- a/apps/docs/src/components/PreviewComponent.tsx
+++ b/apps/docs/src/components/PreviewComponent.tsx
@@ -67,19 +67,20 @@ export const PreviewComponent = forwardRef<PreviewComponentType, PreviewComponen
         <Tabs.Content className={cn("rounded-lg", theme)} value="preview">
           <div
             ref={previewRef}
-            className={cn(
-              "preview not-prose dark:bg-wg-gray-950 relative flex min-h-[300px] w-full items-center justify-center rounded-lg border border-surface-100 bg-background p-10 text-sm text-foreground shadow-wg-xs",
-              {
+            className="preview not-prose dark:bg-wg-gray-950 relative flex w-full items-center justify-center rounded-lg border border-surface-100 bg-background text-sm text-foreground shadow-wg-xs"
+          >
+            <div
+              className={cn("flex min-h-[300px] w-full items-center overflow-x-auto p-10", {
                 "items-center": align === "center",
                 "items-start": align === "start",
                 "items-end": align === "end",
-              }
-            )}
-          >
-            <div className="block w-full text-center">
-              <Suspense fallback={<SuspenseFallback />}>
-                <Preview />
-              </Suspense>
+              })}
+            >
+              <div className="mx-auto block w-full min-w-fit text-center">
+                <Suspense fallback={<SuspenseFallback />}>
+                  <Preview />
+                </Suspense>
+              </div>
             </div>
 
             <Button