[docs][autocomplete] Update Autocomplete demo layout styles

Author: atomiks

docs/src/app/(public)/(content)/react/components/autocomplete/demos/async/css-modules/index.module.css

@@ -38,16 +38,11 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
   border-radius: 0.375rem;
   background-color: canvas;
   color: var(--color-gray-900);
   width: var(--anchor-width);
-  max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
-  overflow-y: auto;
-  scroll-padding-block: 0.5rem;
-  overscroll-behavior: contain;
 
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
@@ -62,6 +57,21 @@
   }
 }
 
+.List {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 0.5rem;
+  outline: 0;
+  max-height: min(23rem, var(--available-height));
+
+  &[data-empty] {
+    padding: 0;
+  }
+}
+
 .Item {
   box-sizing: border-box;
   outline: 0;

docs/src/app/(public)/(content)/react/components/autocomplete/demos/async/css-modules/index.tsx

@@ -82,7 +82,7 @@ export default function ExampleAsyncAutocomplete() {
           <Autocomplete.Positioner className={styles.Positioner} sideOffset={4} align="start">
             <Autocomplete.Popup className={styles.Popup} aria-busy={isLoading || undefined}>
               <Autocomplete.Status className={styles.Status}>{status}</Autocomplete.Status>
-              <Autocomplete.List>
+              <Autocomplete.List className={styles.List}>
                 {(movie: Movie) => (
                   <Autocomplete.Item key={movie.id} className={styles.Item} value={movie}>
                     <div className={styles.MovieItem}>

docs/src/app/(public)/(content)/react/components/autocomplete/demos/async/tailwind/index.tsx

@@ -86,13 +86,13 @@ export default function ExampleAsyncAutocomplete() {
         <Autocomplete.Portal>
           <Autocomplete.Positioner className="outline-none" sideOffset={4} align="start">
             <Autocomplete.Popup
-              className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300"
+              className="w-[var(--anchor-width)] max-w-[var(--available-width)] rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300"
               aria-busy={isLoading || undefined}
             >
               <Autocomplete.Status className="flex items-center gap-2 py-1 pl-4 pr-8 text-sm text-gray-600">
                 {status}
               </Autocomplete.Status>
-              <Autocomplete.List>
+              <Autocomplete.List className="box-border flex max-h-[min(23rem,var(--available-height))] flex-col overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2 py-2 outline-none data-[empty]:p-0">
                 {(movie: Movie) => (
                   <Autocomplete.Item
                     key={movie.id}

docs/src/app/(public)/(content)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css

@@ -38,16 +38,11 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
   border-radius: 0.375rem;
   background-color: canvas;
   color: var(--color-gray-900);
   width: var(--anchor-width);
-  max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
-  overflow-y: auto;
-  scroll-padding-block: 0.5rem;
-  overscroll-behavior: contain;
 
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
@@ -62,6 +57,21 @@
   }
 }
 
+.List {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 0.5rem;
+  outline: 0;
+  max-height: min(23rem, var(--available-height));
+
+  &[data-empty] {
+    padding: 0;
+  }
+}
+
 .Item {
   box-sizing: border-box;
   outline: 0;

docs/src/app/(public)/(content)/react/components/autocomplete/demos/auto-highlight/css-modules/index.tsx

@@ -13,7 +13,7 @@ export default function ExampleAutocompleteAutoHighlight() {
         <Autocomplete.Positioner className={styles.Positioner} sideOffset={4}>
           <Autocomplete.Popup className={styles.Popup}>
             <Autocomplete.Empty className={styles.Empty}>No tags found.</Autocomplete.Empty>
-            <Autocomplete.List>
+            <Autocomplete.List className={styles.List}>
               {(tag: Tag) => (
                 <Autocomplete.Item key={tag.id} className={styles.Item} value={tag}>
                   {tag.value}

docs/src/app/(public)/(content)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx

@@ -13,11 +13,11 @@ export default function ExampleAutocompleteAutoHighlight() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-none" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
             <Autocomplete.Empty className="px-4 py-2 text-[0.925rem] leading-4 text-gray-600 empty:m-0 empty:p-0">
               No tags found.
             </Autocomplete.Empty>
-            <Autocomplete.List>
+            <Autocomplete.List className="box-border flex max-h-[min(23rem,var(--available-height))] flex-col overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2 py-2 outline-none data-[empty]:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}

docs/src/app/(public)/(content)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css

@@ -38,16 +38,12 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
   border-radius: 0.375rem;
   background-color: canvas;
   color: var(--color-gray-900);
   width: var(--anchor-width);
-  max-height: min(var(--available-height), 28rem);
+  max-height: 28rem;
   max-width: var(--available-width);
-  overflow-y: auto;
-  scroll-padding-block: 0.5rem;
-  overscroll-behavior: contain;
 
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
@@ -66,6 +62,15 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 0.5rem;
+  outline: 0;
+  max-height: min(28rem, var(--available-height));
+
+  &[data-empty] {
+    padding: 0;
+  }
 }
 
 .Item {

docs/src/app/(public)/(content)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx

@@ -19,12 +19,12 @@ export default function ExampleFuzzyMatchingAutocomplete() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-none" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),28rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[28rem] max-w-[var(--available-width)] rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
             <Autocomplete.Empty className="px-4 py-2 text-[0.925rem] leading-4 text-gray-600 empty:m-0 empty:p-0">
               No results found for "{<Autocomplete.Value />}"
             </Autocomplete.Empty>
 
-            <Autocomplete.List className="flex flex-col">
+            <Autocomplete.List className="flex flex-col overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2 py-2 outline-0 max-h-[min(28rem,var(--available-height))] data-[empty]:p-0">
               {(item: FuzzyItem) => (
                 <Autocomplete.Item
                   key={item.title}

docs/src/app/(public)/(content)/react/components/autocomplete/demos/grid/css-modules/index.module.css

@@ -148,7 +148,7 @@
     transform 150ms,
     opacity 150ms;
   max-width: var(--available-width);
-  max-height: min(20.5rem, var(--available-height));
+  max-height: 20.5rem;
 
   &[data-starting-style],
   &[data-ending-style] {
@@ -169,16 +169,18 @@
 }
 
 .List {
-  overflow: auto;
+  box-sizing: border-box;
+  overflow-y: auto;
+  overscroll-behavior: contain;
   scroll-padding-top: 2.5rem;
   scroll-padding-bottom: 0.35rem;
-  overscroll-behavior: contain;
+  outline: 0;
   max-height: min(
     calc(20.5rem - var(--input-container-height)),
     calc(var(--available-height) - var(--input-container-height))
   );
 
-  &:empty {
+  &[data-empty] {
     padding: 0;
   }
 }

docs/src/app/(public)/(content)/react/components/autocomplete/demos/grid/tailwind/index.tsx

@@ -61,7 +61,7 @@ export default function ExampleEmojiPicker() {
           </Autocomplete.Trigger>
           <Autocomplete.Portal>
             <Autocomplete.Positioner className="outline-none" sideOffset={4} align="end">
-              <Autocomplete.Popup className="[--input-container-height:3rem] max-w-[var(--available-width)] max-h-[min(20.5rem,var(--available-height))] origin-[var(--transform-origin)] rounded-lg bg-[canvas] shadow-lg shadow-gray-200 text-gray-900 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+              <Autocomplete.Popup className="[--input-container-height:3rem] max-w-[var(--available-width)] max-h-[20.5rem] origin-[var(--transform-origin)] rounded-lg bg-[canvas] shadow-lg shadow-gray-200 text-gray-900 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
                 <div className="mx-1 flex h-[var(--input-container-height)] w-64 items-center justify-center bg-[canvas] text-center">
                   <Autocomplete.Input
                     placeholder="Search emojis…"