From 6ac18cf765f61b91e2cc25dcc62fa5f743e6d4f8 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Mon, 14 Sep 2026 11:35:43 +0100
Subject: [PATCH] Align sort input with the form controls

---
 .../ui-patterns/src/projects/ProjectSearchInput.tsx    | 10 ++--------
 packages/ui-patterns/src/projects/ProjectSortInput.tsx |  5 +----
 .../stories/ProjectsPageExample.stories.tsx            |  6 ++++--
 3 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/ui-patterns/src/projects/ProjectSearchInput.tsx b/packages/ui-patterns/src/projects/ProjectSearchInput.tsx
index d1a40f8..215feea 100644
--- a/packages/ui-patterns/src/projects/ProjectSearchInput.tsx
+++ b/packages/ui-patterns/src/projects/ProjectSearchInput.tsx
@@ -25,7 +25,7 @@ export interface ProjectSearchInputProps {
 }
 
 /**
- * A rounded search box with a leading icon and a clear button while there
+ * A search box with a leading icon and a clear button while there
  * is text. Clearing returns focus to the box.
  */
 export const ProjectSearchInput = ({
@@ -45,7 +45,7 @@ export const ProjectSearchInput = ({
   return (
     <InputGroup className={className}>
       <InputStartElement pointerEvents="none">
-        <Icon as={RiSearch2Line} css={{ color: "gray.800" }} />
+        <Icon as={RiSearch2Line} />
       </InputStartElement>
       <Input
         ref={ref}
@@ -56,14 +56,9 @@ export const ProjectSearchInput = ({
         type="search"
         css={{
           // We draw our own clear button.
-          appearance: "none",
           "&::-webkit-search-cancel-button": { display: "none" },
           ps: 10,
           pe: 10,
-          fontSize: "lg",
-          _placeholder: { color: "gray.500" },
-          borderRadius: "20px",
-          background: "white",
         }}
       />
       {value && (
@@ -74,7 +69,6 @@ export const ProjectSearchInput = ({
               uiPatternsMessage("ui-patterns.clear-action"),
             )}
             onPress={handleClear}
-            css={{ fontSize: "2xl", color: "gray.500" }}
           >
             <Icon as={RiCloseLine} />
           </IconButton>
diff --git a/packages/ui-patterns/src/projects/ProjectSortInput.tsx b/packages/ui-patterns/src/projects/ProjectSortInput.tsx
index 73a6896..cf20a37 100644
--- a/packages/ui-patterns/src/projects/ProjectSortInput.tsx
+++ b/packages/ui-patterns/src/projects/ProjectSortInput.tsx
@@ -49,7 +49,7 @@ export const ProjectSortInput = ({
         disabled={hasSearchQuery}
         // Lets the select shrink below its longest option when space is
         // tight, clipping the text.
-        css={{ fontSize: "lg", background: "white", flex: 1, minW: 0 }}
+        css={{ flex: 1, minW: 0 }}
       >
         {hasSearchQuery ? (
           <option value="relevance">
@@ -76,15 +76,12 @@ export const ProjectSortInput = ({
         onPress={onToggleDirection}
         isDisabled={hasSearchQuery}
         css={{
-          background: "white",
-          fontSize: "2xl",
           // Poses as the second half of the attached select, so the border
           // tracks the input recipe's resting border; the divider between
           // the two is ButtonGroup's hairline.
           border: "2px solid",
           borderColor: "gray.300",
           _hover: { borderColor: "gray.500" },
-          color: "gray.500",
           borderRadius: "md",
         }}
       >
diff --git a/packages/ui-patterns/stories/ProjectsPageExample.stories.tsx b/packages/ui-patterns/stories/ProjectsPageExample.stories.tsx
index d84e98f..bbfafd9 100644
--- a/packages/ui-patterns/stories/ProjectsPageExample.stories.tsx
+++ b/packages/ui-patterns/stories/ProjectsPageExample.stories.tsx
@@ -147,7 +147,9 @@ const ProjectsPageExample = () => {
                 }
                 setQuery(value);
               }}
-              className={css({ maxW: "30ch" })}
+              // Fields inherit their surface colour; the page is grey, so
+              // the wrapper supplies white, shaped to the field's radius.
+              className={css({ maxW: "30ch", bg: "white", borderRadius: "md" })}
             />
             {selection.hasSelection && (
               <Box
@@ -170,7 +172,7 @@ const ProjectsPageExample = () => {
             )}
             <ProjectSortInput
               className={cx(
-                css({ ml: "auto" }),
+                css({ ml: "auto", bg: "white", borderRadius: "md" }),
                 selection.hasSelection
                   ? css({ display: { base: "flex", lg: "none" } })
                   : undefined,