From 46342ca1a4e87c1b17802964caa582bcdd0e7ac3 Mon Sep 17 00:00:00 2001
From: Charis <26616127+charislam@users.noreply.github.com>
Date: Thu, 4 Apr 2024 13:36:16 -0400
Subject: [PATCH] fix: mobile width for ref docs (#22476)

---
 apps/docs/layouts/ref/RefSubLayout.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/docs/layouts/ref/RefSubLayout.tsx b/apps/docs/layouts/ref/RefSubLayout.tsx
index 2259a96273a..a14c56139be 100644
--- a/apps/docs/layouts/ref/RefSubLayout.tsx
+++ b/apps/docs/layouts/ref/RefSubLayout.tsx
@@ -134,12 +134,20 @@ const StickyHeader: FC<StickyHeader> = ({ icon, ...props }) => {
 }
 
 const Details: FC<PropsWithChildren<ISectionDetails>> = (props) => {
-  return <div className="relative w-full">{props.children}</div>
+  /**
+   * `min-w` is necessary because these are used as grid children, which have
+   * default `min-w-auto`
+   */
+  return <div className="relative w-full min-w-full">{props.children}</div>
 }
 
 const Examples: FC<PropsWithChildren<ISectionExamples>> = (props) => {
+  /**
+   * `min-w` is necessary because these are used as grid children, which have
+   * default `min-w-auto`
+   */
   return (
-    <div className="w-full">
+    <div className="w-full min-w-full">
       <div className="sticky top-24">{props.children}</div>
     </div>
   )