fix(docs): overflow fixes for mobile (#79)

stefan-karger · Apr 22, 2024 · 83814d8 · 83814d8
1 parent 9aab77f
commit 83814d8
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/apps/docs/src/registry/example/badge-delta-demo.tsx b/apps/docs/src/registry/example/badge-delta-demo.tsx
@@ -4,15 +4,15 @@ export default function BadgeDeltaDemo() {
   return (
     <div class="flex flex-col gap-4">
       <p>BadgeDelta with pre-defined status icons</p>
-      <div class="flex gap-2">
+      <div class="flex flex-wrap gap-2">
         <BadgeDelta deltaType="increase">text</BadgeDelta>
         <BadgeDelta deltaType="moderateIncrease">text</BadgeDelta>
         <BadgeDelta deltaType="unchanged">text</BadgeDelta>
         <BadgeDelta deltaType="moderateDecrease">text</BadgeDelta>
         <BadgeDelta deltaType="decrease">text</BadgeDelta>
       </div>
       <p>BadgeDelta without text</p>
-      <div class="flex gap-2">
+      <div class="flex flex-wrap gap-2">
         <BadgeDelta deltaType="increase" />
         <BadgeDelta deltaType="moderateIncrease" />
         <BadgeDelta deltaType="unchanged" />

diff --git a/apps/docs/src/registry/example/delta-bar-demo.tsx b/apps/docs/src/registry/example/delta-bar-demo.tsx
@@ -2,7 +2,7 @@ import { DeltaBar } from "~/registry/ui/delta-bar"
 
 export default function DeltaBarDemo() {
   return (
-    <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-4 overflow-x-scroll">
       <p>DeltaBar with default increase behavior</p>
       <DeltaBar value={60} class="w-[400px]" />
       <p>DeltaBar with increase seen as negative</p>

diff --git a/apps/docs/src/registry/example/toast-demo.tsx b/apps/docs/src/registry/example/toast-demo.tsx
@@ -3,7 +3,7 @@ import { showToast, Toaster } from "~/registry/ui/toast"
 
 export default function ToastDemo() {
   return (
-    <div class="flex gap-2">
+    <div class="flex flex-wrap gap-2">
       <Button
         onClick={() =>
           showToast({