From 2b2b91f904f07b78ccd0598e0cc8e49e972a6ff6 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 1 Dec 2024 17:35:54 -0300
Subject: [PATCH] fix: virtualization examples

---
 .../virtualization-ten-thousand.raw.jsx       | 39 ++++++++++++-------
 .../components/listbox/virtualization.raw.jsx | 39 ++++++++++++-------
 .../virtualization-custom-item-height.raw.jsx |  1 +
 .../virtualization-max-listbox-height.raw.jsx |  1 +
 .../virtualization-ten-thousand.raw.jsx       |  7 +++-
 .../components/select/virtualization.raw.jsx  |  7 +++-
 6 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/apps/docs/content/components/listbox/virtualization-ten-thousand.raw.jsx b/apps/docs/content/components/listbox/virtualization-ten-thousand.raw.jsx
index f569bea6cc..51bc830984 100644
--- a/apps/docs/content/components/listbox/virtualization-ten-thousand.raw.jsx
+++ b/apps/docs/content/components/listbox/virtualization-ten-thousand.raw.jsx
@@ -32,26 +32,35 @@ const generateItems = (n) => {
   return dataset;
 };
 
+const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
 export default function App() {
   const items = generateItems(1000);
 
   return (
     <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Listbox
-        isVirtualized
-        label={"Select from 10000 items"}
-        placeholder="Select..."
-        virtualization={{
-          maxListboxHeight: 400,
-          itemHeight: 40,
-        }}
-      >
-        {items.map((item, index) => (
-          <ListboxItem key={index} value={item.value}>
-            {item.label}
-          </ListboxItem>
-        ))}
-      </Listbox>
+      <ListboxWrapper>
+        <Listbox
+          isVirtualized
+          className="max-w-xs"
+          label={"Select from 10000 items"}
+          placeholder="Select..."
+          virtualization={{
+            maxListboxHeight: 400,
+            itemHeight: 40,
+          }}
+        >
+          {items.map((item, index) => (
+            <ListboxItem key={index} value={item.value}>
+              {item.label}
+            </ListboxItem>
+          ))}
+        </Listbox>
+      </ListboxWrapper>
     </div>
   );
 }
diff --git a/apps/docs/content/components/listbox/virtualization.raw.jsx b/apps/docs/content/components/listbox/virtualization.raw.jsx
index 96ec2011b8..34aa80ade1 100644
--- a/apps/docs/content/components/listbox/virtualization.raw.jsx
+++ b/apps/docs/content/components/listbox/virtualization.raw.jsx
@@ -31,26 +31,35 @@ const generateItems = (n) => {
   return dataset;
 };
 
+const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
 export default function App() {
   const items = generateItems(1000);
 
   return (
     <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Listbox
-        isVirtualized
-        label={"Select from 1000 items"}
-        placeholder="Select..."
-        virtualization={{
-          maxListboxHeight: 400,
-          itemHeight: 40,
-        }}
-      >
-        {items.map((item, index) => (
-          <ListboxItem key={index} value={item.value}>
-            {item.label}
-          </ListboxItem>
-        ))}
-      </Listbox>
+      <ListboxWrapper>
+        <Listbox
+          isVirtualized
+          className="max-w-xs"
+          label={"Select from 1000 items"}
+          placeholder="Select..."
+          virtualization={{
+            maxListboxHeight: 400,
+            itemHeight: 40,
+          }}
+        >
+          {items.map((item, index) => (
+            <ListboxItem key={index} value={item.value}>
+              {item.label}
+            </ListboxItem>
+          ))}
+        </Listbox>
+      </ListboxWrapper>
     </div>
   );
 }
diff --git a/apps/docs/content/components/select/virtualization-custom-item-height.raw.jsx b/apps/docs/content/components/select/virtualization-custom-item-height.raw.jsx
index 35c578ffb1..efc2db30c2 100644
--- a/apps/docs/content/components/select/virtualization-custom-item-height.raw.jsx
+++ b/apps/docs/content/components/select/virtualization-custom-item-height.raw.jsx
@@ -39,6 +39,7 @@ export default function App() {
     <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
       <Select
         isVirtualized
+        className="max-w-xs"
         itemHeight={40}
         label={"Select from 1000 items"}
         maxListboxHeight={400}
diff --git a/apps/docs/content/components/select/virtualization-max-listbox-height.raw.jsx b/apps/docs/content/components/select/virtualization-max-listbox-height.raw.jsx
index 6a7f1a0949..8aafa4625c 100644
--- a/apps/docs/content/components/select/virtualization-max-listbox-height.raw.jsx
+++ b/apps/docs/content/components/select/virtualization-max-listbox-height.raw.jsx
@@ -39,6 +39,7 @@ export default function App() {
     <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
       <Select
         isVirtualized
+        className="max-w-xs"
         label={"Select from 1000 items"}
         maxListboxHeight={400}
         placeholder="Select..."
diff --git a/apps/docs/content/components/select/virtualization-ten-thousand.raw.jsx b/apps/docs/content/components/select/virtualization-ten-thousand.raw.jsx
index 94edb865a0..2c8e1871ff 100644
--- a/apps/docs/content/components/select/virtualization-ten-thousand.raw.jsx
+++ b/apps/docs/content/components/select/virtualization-ten-thousand.raw.jsx
@@ -37,7 +37,12 @@ export default function App() {
 
   return (
     <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Select isVirtualized label={"Select from 10000 items"} placeholder="Select...">
+      <Select
+        isVirtualized
+        className="max-w-xs"
+        label={"Select from 10000 items"}
+        placeholder="Select..."
+      >
         {items.map((item, index) => (
           <SelectItem key={index} value={item.value}>
             {item.label}
diff --git a/apps/docs/content/components/select/virtualization.raw.jsx b/apps/docs/content/components/select/virtualization.raw.jsx
index 8434e57521..5701198948 100644
--- a/apps/docs/content/components/select/virtualization.raw.jsx
+++ b/apps/docs/content/components/select/virtualization.raw.jsx
@@ -37,7 +37,12 @@ export default function App() {
 
   return (
     <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Select isVirtualized label={"Select from 1000 items"} placeholder="Select...">
+      <Select
+        isVirtualized
+        className="max-w-xs"
+        label={"Select from 1000 items"}
+        placeholder="Select..."
+      >
         {items.map((item, index) => (
           <SelectItem key={index} value={item.value}>
             {item.label}