fix: virtualization examples

nextui-org · Dec 1, 2024 · 2b2b91f · 2b2b91f
1 parent c096fe4
commit 2b2b91f
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}