From 4dcbef383e5755541ed447f426cf297a7eb6cf49 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Fri, 30 Jan 2026 14:07:35 -0600
Subject: [PATCH 1/8] fix tags overflowing and enable horizontal scrolling

---
 packages/dev/s2-docs/src/SearchMenu.tsx      | 21 ++++++++++----------
 packages/dev/s2-docs/src/SearchTagGroups.tsx |  6 ++----
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
index 155e9bb0c68..d34e388efbf 100644
--- a/packages/dev/s2-docs/src/SearchMenu.tsx
+++ b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -175,16 +175,17 @@ export function SearchMenu(props: SearchMenuProps) {
                   </div>
 
                   <CloseButton onClose={onClose} />
-
-                  <SearchTagGroups
-                    sectionTags={sectionTagsForDisplay}
-                    resourceTags={tabResourceTags}
-                    selectedTagId={selectedTagId}
-                    onSectionSelectionChange={handleTagSelectionChange}
-                    onResourceSelectionChange={handleTagSelectionChange}
-                    onHover={tag => {
-                      preloadComponentImages(sections.find(s => s.id === tag)?.children?.map(c => c.name) || []);
-                    }} />
+                  <div className={style({overflow: 'auto', flexShrink: 0, paddingBottom: 8})}>
+                    <SearchTagGroups
+                      sectionTags={sectionTagsForDisplay}
+                      resourceTags={tabResourceTags}
+                      selectedTagId={selectedTagId}
+                      onSectionSelectionChange={handleTagSelectionChange}
+                      onResourceSelectionChange={handleTagSelectionChange}
+                      onHover={tag => {
+                        preloadComponentImages(sections.find(s => s.id === tag)?.children?.map(c => c.name) || []);
+                      }} />
+                  </div>
                   {isIconsSelected ? (
                     <div className={style({flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column'})}>
                       <Suspense fallback={<IconSearchSkeleton />}>
diff --git a/packages/dev/s2-docs/src/SearchTagGroups.tsx b/packages/dev/s2-docs/src/SearchTagGroups.tsx
index 521d0335d1d..62cf17bfd6e 100644
--- a/packages/dev/s2-docs/src/SearchTagGroups.tsx
+++ b/packages/dev/s2-docs/src/SearchTagGroups.tsx
@@ -18,7 +18,6 @@ interface SearchTagGroupsProps {
   selectedTagId: string | undefined,
   onSectionSelectionChange: (keys: Iterable<Key>) => void,
   onResourceSelectionChange?: (keys: Iterable<Key>) => void,
-  isMobile?: boolean,
   wrapperClassName?: string,
   contentClassName?: string,
   onHover?: (id: Key) => void
@@ -30,7 +29,6 @@ export function SearchTagGroups({
   selectedTagId,
   onSectionSelectionChange,
   onResourceSelectionChange,
-  isMobile = false,
   wrapperClassName,
   contentClassName,
   onHover
@@ -58,7 +56,7 @@ export function SearchTagGroups({
                 onSelectionChange={onSectionSelectionChange}
                 aria-label="Sections"
                 items={sectionTags}
-                UNSAFE_style={isMobile ? {whiteSpace: 'nowrap'} : undefined}>
+                UNSAFE_style={{whiteSpace: 'nowrap'}}>
                 {(tag) => (
                   <Tag key={tag.id} id={tag.id} onHoverStart={() => onHover?.(tag.id)} onPressStart={() => onHover?.(tag.id)}>
                     {tag.name}
@@ -79,7 +77,7 @@ export function SearchTagGroups({
                 onSelectionChange={onResourceSelectionChange}
                 aria-label="Resources"
                 items={resourceTags}
-                UNSAFE_style={isMobile ? {whiteSpace: 'nowrap'} : undefined}>
+                UNSAFE_style={{whiteSpace: 'nowrap'}}>
                 {(tag) => (
                   <Tag key={tag.id} id={tag.id} href={tag.href} target="_blank">
                     {tag.name}

From cabeb7b9885489db28188495a385df48a4c8fcdb Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Fri, 30 Jan 2026 14:11:14 -0600
Subject: [PATCH 2/8] start-align the info messages

---
 packages/dev/s2-docs/src/ColorSearchView.tsx | 11 +++--------
 packages/dev/s2-docs/src/IconSearchView.tsx  |  4 ++--
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/dev/s2-docs/src/ColorSearchView.tsx b/packages/dev/s2-docs/src/ColorSearchView.tsx
index 27ba1334063..c0298bd2d5f 100644
--- a/packages/dev/s2-docs/src/ColorSearchView.tsx
+++ b/packages/dev/s2-docs/src/ColorSearchView.tsx
@@ -201,14 +201,9 @@ const scaleSwatches: Record<string, string> = {
 
 export function CopyInfoMessage() {
   return (
-    <div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4, padding: 8})}>
-      <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
-        <InfoCircle styles={iconStyle({size: 'XS'})} />
-        <span className={style({font: 'ui'})}>Press a color to copy its name.</span>
-      </div>
-      <span>
-        See <Link href="styling">styling</Link> for more information.
-      </span>
+    <div className={style({display: 'flex', gap: 4, padding: 8})}>
+      <InfoCircle styles={iconStyle({size: 'XS'})} />
+      <span className={style({font: 'ui'})}>Press a color to copy its name. See <Link href="styling">styling</Link> for more information.</span>
     </div>
   );
 }
diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx
index ab1ad77364d..c45f5382cf5 100644
--- a/packages/dev/s2-docs/src/IconSearchView.tsx
+++ b/packages/dev/s2-docs/src/IconSearchView.tsx
@@ -59,9 +59,9 @@ export function useCopyImport() {
 
 function CopyInfoMessage() {
   return (
-    <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4})}>
+    <div className={style({display: 'flex', gap: 4, padding: 8})}>
       <InfoCircle styles={iconStyle({size: 'XS'})} />
-      <span className={style({font: 'ui'})}>Press an item to copy its import statement</span>
+      <span className={style({font: 'ui'})}>Press an item to copy its import statement. See <Link href="icons">Icons</Link> for more information.</span>
     </div>
   );
 }

From 14bf6b90c879474f69b8e126120b47cb9be642e7 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 2 Feb 2026 14:48:52 -0600
Subject: [PATCH 3/8] fix import

---
 packages/dev/s2-docs/src/IconSearchView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx
index c45f5382cf5..10a98cd7507 100644
--- a/packages/dev/s2-docs/src/IconSearchView.tsx
+++ b/packages/dev/s2-docs/src/IconSearchView.tsx
@@ -4,7 +4,7 @@
 import {Autocomplete, GridLayout, ListBox, ListBoxItem, Size, useFilter, Virtualizer} from 'react-aria-components';
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import Close from '@react-spectrum/s2/icons/Close';
-import {Content, Heading, IllustratedMessage, pressScale, SearchField, Skeleton, Text, ToastQueue} from '@react-spectrum/s2';
+import {Content, Heading, IllustratedMessage, Link, pressScale, SearchField, Skeleton, Text, ToastQueue} from '@react-spectrum/s2';
 import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {iconAliases} from './iconAliases.js';
 // @ts-ignore

From ea8978b1ffbf85829bb727793042f79014c03631 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 2 Feb 2026 14:54:51 -0600
Subject: [PATCH 4/8] lint

---
 packages/dev/s2-docs/src/MobileSearchMenu.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
index 5cf646d8be4..fb672db5c12 100644
--- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx
+++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
@@ -328,7 +328,6 @@ function MobileNav({initialTag}: {initialTag?: string}) {
                         selectedTagId={selectedSection}
                         onSectionSelectionChange={handleTagSelectionChange}
                         onResourceSelectionChange={handleTagSelectionChange}
-                        isMobile
                         wrapperClassName={style({paddingTop: 0})}
                         contentClassName={style({display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, marginX: 0})} />
                     </div>

From f41dcca4376ecfc899e87704fa25376b676bd8a6 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 2 Feb 2026 19:08:33 -0600
Subject: [PATCH 5/8] share info message styles

---
 packages/dev/s2-docs/src/ColorSearchView.tsx  | 13 ++--------
 packages/dev/s2-docs/src/IconSearchView.tsx   | 15 +++---------
 .../dev/s2-docs/src/IllustrationCards.tsx     | 18 ++++----------
 packages/dev/s2-docs/src/colorSearchData.tsx  | 24 +++++++++++++++----
 4 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/packages/dev/s2-docs/src/ColorSearchView.tsx b/packages/dev/s2-docs/src/ColorSearchView.tsx
index c0298bd2d5f..a7a6e4b5c77 100644
--- a/packages/dev/s2-docs/src/ColorSearchView.tsx
+++ b/packages/dev/s2-docs/src/ColorSearchView.tsx
@@ -6,7 +6,7 @@ import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import {colorSwatch, getColorScale} from './color.macro' with {type: 'macro'};
 import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Header, ListBox, ListBoxItem, ListBoxSection} from 'react-aria-components';
-import InfoCircle from '@react-spectrum/s2/icons/InfoCircle';
+import {InfoMessage} from './colorSearchData';
 // eslint-disable-next-line monorepo/no-internal-import
 import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
@@ -199,15 +199,6 @@ const scaleSwatches: Record<string, string> = {
 };
 
 
-export function CopyInfoMessage() {
-  return (
-    <div className={style({display: 'flex', gap: 4, padding: 8})}>
-      <InfoCircle styles={iconStyle({size: 'XS'})} />
-      <span className={style({font: 'ui'})}>Press a color to copy its name. See <Link href="styling">styling</Link> for more information.</span>
-    </div>
-  );
-}
-
 interface ColorSearchViewProps {
   filteredItems: Array<{
     id: string,
@@ -264,7 +255,7 @@ export function ColorSearchView({filteredItems, exactMatches = new Set(), closes
 
   return (
     <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
-      <CopyInfoMessage />
+      <InfoMessage>Press a color to copy its name. See <Link href="styling">styling</Link> for more information.</InfoMessage>
       <ListBox
         aria-label="Colors"
         onAction={(key) => {
diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx
index 10a98cd7507..890635f260d 100644
--- a/packages/dev/s2-docs/src/IconSearchView.tsx
+++ b/packages/dev/s2-docs/src/IconSearchView.tsx
@@ -9,7 +9,7 @@ import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type:
 import {iconAliases} from './iconAliases.js';
 // @ts-ignore
 import icons from '/packages/@react-spectrum/s2/s2wf-icons/*.svg';
-import InfoCircle from '@react-spectrum/s2/icons/InfoCircle';
+import {InfoMessage} from './colorSearchData';
 // eslint-disable-next-line monorepo/no-internal-import
 import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
@@ -57,15 +57,6 @@ export function useCopyImport() {
   return {copiedId, handleCopyImport};
 }
 
-function CopyInfoMessage() {
-  return (
-    <div className={style({display: 'flex', gap: 4, padding: 8})}>
-      <InfoCircle styles={iconStyle({size: 'XS'})} />
-      <span className={style({font: 'ui'})}>Press an item to copy its import statement. See <Link href="icons">Icons</Link> for more information.</span>
-    </div>
-  );
-}
-
 interface IconListBoxProps {
   items: typeof iconList,
   copiedId: string | null,
@@ -133,7 +124,7 @@ export function IconSearchView({filteredItems, listBoxClassName}: IconSearchView
 
   return (
     <>
-      <CopyInfoMessage />
+      <InfoMessage>Press an item to copy its import statement. See <Link href="icons">Icons</Link> for more information.</InfoMessage>
       <IconListBox items={filteredItems} copiedId={copiedId} onAction={handleCopyImport} listBoxClassName={listBoxClassName} />
     </>
   );
@@ -236,7 +227,7 @@ export function IconsPageSearch() {
       <Autocomplete filter={filter}>
         <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
           <SearchField size="L" aria-label="Search icons" placeholder="Search icons" />
-          <CopyInfoMessage />
+          <InfoMessage>Press an item to copy its import statement. See <Link href="icons">Icons</Link> for more information.</InfoMessage>
           <IconListBox
             items={iconList}
             copiedId={copiedId}
diff --git a/packages/dev/s2-docs/src/IllustrationCards.tsx b/packages/dev/s2-docs/src/IllustrationCards.tsx
index 3d9a968edd1..768a1ff5970 100644
--- a/packages/dev/s2-docs/src/IllustrationCards.tsx
+++ b/packages/dev/s2-docs/src/IllustrationCards.tsx
@@ -3,12 +3,12 @@
 import {Autocomplete, GridLayout, ListBox, ListBoxItem, Size, useFilter, Virtualizer} from 'react-aria-components';
 // eslint-disable-next-line monorepo/no-internal-import
 import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
-import {Content, Heading, IllustratedMessage, pressScale, ProgressCircle, Radio, RadioGroup, SearchField, SegmentedControl, SegmentedControlItem, Text, ToastQueue} from '@react-spectrum/s2';
-import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {Content, Heading, IllustratedMessage, Link, pressScale, ProgressCircle, Radio, RadioGroup, SearchField, SegmentedControl, SegmentedControlItem, Text, ToastQueue} from '@react-spectrum/s2';
+import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 // @ts-ignore
 import Gradient from '@react-spectrum/s2/icons/Gradient';
-import {illustrationAliases} from './illustrationAliases.js';
-import InfoCircle from '@react-spectrum/s2/icons/InfoCircle';
+import {illustrationAliases} from './illustrationAliases.js'; 
+import {InfoMessage} from './colorSearchData';
 // eslint-disable-next-line monorepo/no-internal-import
 import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
 import Polygon4 from '@react-spectrum/s2/icons/Polygon4';
@@ -80,7 +80,7 @@ export function IllustrationCards() {
             <Radio value="generic2">Generic 2</Radio>
           </RadioGroup>
         )}
-        <CopyInfoMessage />
+        <InfoMessage>Press an item to copy its import statement. See <Link href="illustrations">Illustrations</Link> for more information.</InfoMessage>
         <Suspense fallback={<Loading />}>
           <IllustrationList variant={variant} gradientStyle={gradientStyle} />
         </Suspense>
@@ -97,14 +97,6 @@ function Loading() {
   );
 }
 
-function CopyInfoMessage() {
-  return (
-    <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4})}>
-      <InfoCircle styles={iconStyle({size: 'XS'})} />
-      <span className={style({font: 'ui'})}>Press an item to copy its import statement</span>
-    </div>
-  );
-}
 
 function useCopyImport(variant: string, gradientStyle: string) {
   let [copiedId, setCopiedId] = useState<string | null>(null);
diff --git a/packages/dev/s2-docs/src/colorSearchData.tsx b/packages/dev/s2-docs/src/colorSearchData.tsx
index 2200a33ffb7..a5d798e3114 100644
--- a/packages/dev/s2-docs/src/colorSearchData.tsx
+++ b/packages/dev/s2-docs/src/colorSearchData.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import {CopyInfoMessage} from './ColorSearchView';
 import {getColorHexMap} from './color.macro' with {type: 'macro'};
 import {Header, ListBox, ListBoxItem, ListBoxSection} from 'react-aria-components';
+import {iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import InfoCircle from '@react-spectrum/s2/icons/InfoCircle';
+import {Link, Skeleton, Text} from '@react-spectrum/s2';
 import React, {useMemo, useRef} from 'react';
-import {Skeleton, Text} from '@react-spectrum/s2';
-import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 export const colorHexMaps = getColorHexMap();
 
@@ -148,6 +148,22 @@ const headerStyle = style({
   marginBottom: 4
 });
 
+interface InfoMessageProps {
+  /** The content to display in the message. */
+  children: React.ReactNode
+}
+
+export function InfoMessage({children}: InfoMessageProps) {
+  return (
+    <div className={style({display: 'flex', gap: 4, padding: 8, alignItems: 'center'})}>
+      <InfoCircle styles={iconStyle({size: 'XS'})} />
+      <span className={style({font: 'ui'})}>
+        {children}
+      </span>
+    </div>
+  );
+}
+
 function SkeletonColorItem({item}: {item: {id: string}}) {
   const ref = useRef(null);
   return (
@@ -204,7 +220,7 @@ export function ColorSearchSkeleton() {
 
   return (
     <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
-      <CopyInfoMessage />
+      <InfoMessage>Press a color to copy its name. See <Link href="styling">styling</Link> for more information.</InfoMessage>
       <Skeleton isLoading>
         <ListBox
           aria-label="Colors loading"

From af51f41ac131e0dd4b35eb8cda88f574f70df96d Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 2 Feb 2026 19:16:10 -0600
Subject: [PATCH 6/8] trim icon/illustration search inputs

---
 packages/dev/s2-docs/src/IconSearchView.tsx    | 9 +++++++--
 packages/dev/s2-docs/src/IllustrationCards.tsx | 9 +++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx
index 890635f260d..4a226bfbd27 100644
--- a/packages/dev/s2-docs/src/IconSearchView.tsx
+++ b/packages/dev/s2-docs/src/IconSearchView.tsx
@@ -19,14 +19,19 @@ export const iconList = Object.keys(icons).map(name => ({id: name.replace(/^S2_I
 export function useIconFilter() {
   let {contains} = useFilter({sensitivity: 'base'});
   return useCallback((textValue: string, inputValue: string) => {
+    const trimmedInput = inputValue.trim();
+    // If input is empty after trimming, show all items
+    if (!trimmedInput) {
+      return true;
+    }
     // Check for alias matches
     for (const alias of Object.keys(iconAliases)) {
-      if (contains(alias, inputValue) && iconAliases[alias].includes(textValue)) {
+      if (contains(alias, trimmedInput) && iconAliases[alias].includes(textValue)) {
         return true;
       }
     }
     // Also compare for substrings in the icon's actual name
-    return textValue != null && contains(textValue, inputValue);
+    return textValue != null && contains(textValue, trimmedInput);
   }, [contains]);
 }
 
diff --git a/packages/dev/s2-docs/src/IllustrationCards.tsx b/packages/dev/s2-docs/src/IllustrationCards.tsx
index 768a1ff5970..ecb49b877c7 100644
--- a/packages/dev/s2-docs/src/IllustrationCards.tsx
+++ b/packages/dev/s2-docs/src/IllustrationCards.tsx
@@ -44,14 +44,19 @@ export function IllustrationCards() {
 
   let {contains} = useFilter({sensitivity: 'base'});
   let filter = useCallback((textValue: string, inputValue: string) => {
+    const trimmedInput = inputValue.trim();
+    // If input is empty after trimming, show all items
+    if (!trimmedInput) {
+      return true;
+    }
     // Check if input matches an alias that maps to this illustration name
     for (const alias of Object.keys(illustrationAliases)) {
-      if (contains(alias, inputValue) && illustrationAliases[alias].includes(textValue)) {
+      if (contains(alias, trimmedInput) && illustrationAliases[alias].includes(textValue)) {
         return true;
       }
     }
     // Also compare for substrings in the illustration's actual name
-    return textValue != null && contains(textValue, inputValue);
+    return textValue != null && contains(textValue, trimmedInput);
   }, [contains]);
 
   return (

From 44c355207ec363105fb95ebc4af907415c891ba5 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Tue, 3 Feb 2026 09:09:53 -0600
Subject: [PATCH 7/8] fix padding on color items

---
 packages/dev/s2-docs/src/ColorSearchView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/src/ColorSearchView.tsx b/packages/dev/s2-docs/src/ColorSearchView.tsx
index a7a6e4b5c77..6582745aa9d 100644
--- a/packages/dev/s2-docs/src/ColorSearchView.tsx
+++ b/packages/dev/s2-docs/src/ColorSearchView.tsx
@@ -19,7 +19,7 @@ const itemStyle = style({
   justifyContent: 'center',
   alignItems: 'center',
   gap: 8,
-  padding: 8,
+  paddingY: 8,
   backgroundColor: {
     default: 'gray-50',
     isHovered: 'gray-100',

From 576ff2f424e02ae829cbb380c66c37eec3ff3f23 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Tue, 3 Feb 2026 09:17:17 -0600
Subject: [PATCH 8/8] use consistent styles between icon search and color
 search

---
 packages/dev/s2-docs/src/ColorSearchView.tsx  | 21 ++++++++++---------
 packages/dev/s2-docs/src/MobileSearchMenu.tsx | 19 ++++++-----------
 packages/dev/s2-docs/src/SearchMenu.tsx       |  2 +-
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/packages/dev/s2-docs/src/ColorSearchView.tsx b/packages/dev/s2-docs/src/ColorSearchView.tsx
index 6582745aa9d..a19b193f925 100644
--- a/packages/dev/s2-docs/src/ColorSearchView.tsx
+++ b/packages/dev/s2-docs/src/ColorSearchView.tsx
@@ -47,13 +47,6 @@ const swatchStyle = style({
   forcedColorAdjust: 'none'
 });
 
-const listBoxStyle = style({
-  width: 'full',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 24
-});
-
 const sectionStyle = style({
   display: 'grid',
   gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
@@ -254,7 +247,7 @@ export function ColorSearchView({filteredItems, exactMatches = new Set(), closes
   }
 
   return (
-    <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
+    <>
       <InfoMessage>Press a color to copy its name. See <Link href="styling">styling</Link> for more information.</InfoMessage>
       <ListBox
         aria-label="Colors"
@@ -268,7 +261,15 @@ export function ColorSearchView({filteredItems, exactMatches = new Set(), closes
           }
         }}
         layout="grid"
-        className={listBoxStyle}
+        className={style({
+          width: 'full',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 24,
+          flexGrow: 1,
+          overflow: 'auto',
+          scrollPaddingY: 4
+        })}
         dependencies={[copiedId, exactMatches, closestMatches]}
         items={sections}>
         {section => (
@@ -286,7 +287,7 @@ export function ColorSearchView({filteredItems, exactMatches = new Set(), closes
           </ListBoxSection>
         )}
       </ListBox>
-    </div>
+    </>
   );
 }
 
diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
index fb672db5c12..501f7d71a5e 100644
--- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx
+++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
@@ -355,19 +355,12 @@ function MobileNav({initialTag}: {initialTag?: string}) {
                       </Suspense>
                     )}
                     {!showIcons && isColorsSelected && library.id === 'react-spectrum' && (
-                      <div
-                        className={style({
-                          flexGrow: 1,
-                          overflow: 'auto',
-                          paddingBottom: 16
-                        })}>
-                        <Suspense fallback={<ColorSearchSkeleton />}>
-                          <LazyColorSearchView
-                            filteredItems={filteredColors.sections}
-                            exactMatches={filteredColors.exactMatches}
-                            closestMatches={filteredColors.closestMatches} />
-                        </Suspense>
-                      </div>
+                      <Suspense fallback={<ColorSearchSkeleton />}>
+                        <LazyColorSearchView
+                          filteredItems={filteredColors.sections}
+                          exactMatches={filteredColors.exactMatches}
+                          closestMatches={filteredColors.closestMatches} />
+                      </Suspense>
                     )}
                     {!showIcons && (!isColorsSelected || library.id !== 'react-spectrum') && (
                       <ComponentCardView
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
index d34e388efbf..7e5eb7964ae 100644
--- a/packages/dev/s2-docs/src/SearchMenu.tsx
+++ b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -196,7 +196,7 @@ export function SearchMenu(props: SearchMenuProps) {
                     </div>
                   ) : null}
                   {selectedTagId === 'colors' && (
-                    <div className={style({flexGrow: 1, overflow: 'auto', paddingX: 16, paddingBottom: 16})}>
+                    <div className={style({flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column'})}>
                       <Suspense fallback={<ColorSearchSkeleton />}>
                         <LazyColorSearchView filteredItems={filteredColors.sections} exactMatches={filteredColors.exactMatches} closestMatches={filteredColors.closestMatches} />
                       </Suspense>