fix: Search input in keyboard shortcuts is not rounded (#12047)

app/components/DocumentExplorer/DocumentExplorer.tsx

@@ -22,7 +22,6 @@ import DocumentExplorerNode from "./DocumentExplorerNode";
 import DocumentExplorerSearchResult from "./DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import { Outline } from "~/components/Input";
 import InputSearch from "~/components/InputSearch";
 import Text from "~/components/Text";
 import useMobile from "~/hooks/useMobile";
@@ -447,10 +446,7 @@ const FlexContainer = styled(Flex)`
   justify-content: center;
 `;
 
-const ListSearch = styled(InputSearch)`
-  ${Outline} {
-    border-radius: 16px;
-  }
+const ListSearch = styled(InputSearch).attrs({ round: true })`
   margin-bottom: 4px;
   padding-left: 24px;
   padding-right: 24px;

app/components/Input.tsx

@@ -97,6 +97,7 @@ export const Outline = styled(Flex)<{
   margin?: string | number;
   hasError?: boolean;
   $focused?: boolean;
+  $round?: boolean;
 }>`
   position: relative;
   flex: 1;
@@ -111,7 +112,7 @@ export const Outline = styled(Flex)<{
       : props.$focused
         ? props.theme.inputBorderFocused
         : props.theme.inputBorder};
-  border-radius: 4px;
+  border-radius: ${(props) => (props.$round ? "16px" : "4px")};
   font-weight: normal;
   align-items: center;
   overflow: hidden;
@@ -158,6 +159,8 @@ export interface Props extends Omit<
   icon?: React.ReactNode;
   /** Show a character count near the maxLength limit. Always shown for textareas, opt-in for other types. */
   showCharacterCount?: boolean;
+  /** Whether to use a round border-radius (16px) instead of the default (4px). */
+  round?: boolean;
   /** Like autoFocus, but also select any text in the input */
   autoSelect?: boolean;
   /** Callback is triggered with the CMD+Enter keyboard combo */
@@ -246,6 +249,7 @@ function Input(
     short,
     flex,
     prefix,
+    round,
     labelHidden,
     maxLength,
     showCharacterCount,
@@ -273,7 +277,7 @@ function Input(
           ) : (
             wrappedLabel
           ))}
-        <Outline $focused={focused} margin={margin}>
+        <Outline $focused={focused} $round={round} margin={margin}>
           {prefix}
           {icon && <IconWrapper>{icon}</IconWrapper>}
           {type === "textarea" ? (

app/components/InputSearchPage.tsx

@@ -14,7 +14,7 @@ import {
 import useBoolean from "~/hooks/useBoolean";
 import useKeyDown from "~/hooks/useKeyDown";
 import { searchPath } from "~/utils/routeHelpers";
-import Input, { Outline } from "./Input";
+import Input from "./Input";
 
 type Props = {
   /** A string representing where the search started, for tracking. */
@@ -112,12 +112,8 @@ function InputSearchPage({
   );
 }
 
-const InputMaxWidth = styled(Input)`
+const InputMaxWidth = styled(Input).attrs({ round: true })`
   max-width: min(calc(30vw + 20px), 100%);
-
-  ${Outline} {
-    border-radius: 16px;
-  }
 `;
 
 const Shortcut = styled.span<{ $visible: boolean }>`

app/scenes/KeyboardShortcuts.tsx

@@ -557,6 +557,7 @@ function KeyboardShortcuts({ defaultQuery = "" }: Props) {
     <Flex column>
       <StickySearch>
         <InputSearch
+          round
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           value={searchTerm}