From 44079031cf4973775cc91f20cf805f0b88b13bad Mon Sep 17 00:00:00 2001
From: Zubair Ibn Zamir <zubair@ibnzamir.com>
Date: Wed, 24 Dec 2025 16:36:22 +0600
Subject: [PATCH] docs: fix prevent horizontal scroll in Note and Warning
 components on mobile

Add min-w-0 and flex-1 to the content div in Note and Warning components to allow proper flex shrinking on mobile devices.

This prevents horizontal overflow when content is wider than the viewport.
---
 docs/src/components/mdx.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/mdx.tsx b/docs/src/components/mdx.tsx
index c10e9fcb58..012a37da03 100644
--- a/docs/src/components/mdx.tsx
+++ b/docs/src/components/mdx.tsx
@@ -82,7 +82,7 @@ export function Note({ children }: { children: React.ReactNode }) {
   return (
     <div className="my-6 flex gap-2.5 rounded-2xl border border-sky-500/20 bg-sky-50/80 p-4 leading-6 text-sky-900 dark:border-sky-500/30 dark:bg-sky-500/5 dark:text-sky-200 dark:[--tw-prose-links-hover:theme(colors.red.300)] dark:[--tw-prose-links:theme(colors.white)]">
       <InformationCircleIcon className="mt-1 h-4 w-4 flex-none fill-sky-500 stroke-white dark:fill-sky-200/20 dark:stroke-sky-200" />
-      <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
+      <div className="min-w-0 flex-1 [&>:first-child]:mt-0 [&>:last-child]:mb-0">
         {children}
       </div>
     </div>
@@ -93,7 +93,7 @@ export function Warning({ children }: { children: React.ReactNode }) {
   return (
     <div className="my-6 flex gap-2.5 rounded-2xl border border-red-500/20 bg-red-50/50 p-4 leading-6 text-red-900 dark:border-red-500/30 dark:bg-red-500/5 dark:text-red-200 dark:[--tw-prose-links-hover:theme(colors.red.300)] dark:[--tw-prose-links:theme(colors.white)]">
       <ExclamationCircleIcon className="mt-1 h-4 w-4 flex-none fill-red-500" />
-      <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
+      <div className="min-w-0 flex-1 [&>:first-child]:mt-0 [&>:last-child]:mb-0">
         {children}
       </div>
     </div>