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>