Use Tailwind-scale search values

Author: klopez4212

desktop/src/features/search/ui/SearchPromptPlaceholder.tsx

@@ -15,8 +15,9 @@ const SEARCH_PROMPT_ENTER_DURATION_SECONDS = 0.54;
 const SEARCH_PROMPT_EXIT_DURATION_SECONDS = 0.32;
 const SEARCH_PROMPT_ENTER_STAGGER_SECONDS = 0.014;
 const SEARCH_PROMPT_EXIT_STAGGER_SECONDS = 0.008;
-const SEARCH_PROMPT_Y_OFFSET_PX = 8;
-const SEARCH_PROMPT_BLUR_PX = 5;
+const SEARCH_PROMPT_Y_OFFSET = "0.5rem";
+const SEARCH_PROMPT_NEGATIVE_Y_OFFSET = "-0.5rem";
+const SEARCH_PROMPT_BLUR = "0.25rem";
 
 const searchPromptPhraseVariants = {
   animate: {
@@ -34,7 +35,7 @@ const searchPromptPhraseVariants = {
 
 const searchPromptCharacterVariants = {
   animate: {
-    filter: "blur(0px)",
+    filter: "blur(0)",
     opacity: 1,
     transition: {
       duration: SEARCH_PROMPT_ENTER_DURATION_SECONDS,
@@ -43,18 +44,18 @@ const searchPromptCharacterVariants = {
     y: 0,
   },
   exit: {
-    filter: `blur(${SEARCH_PROMPT_BLUR_PX}px)`,
+    filter: `blur(${SEARCH_PROMPT_BLUR})`,
     opacity: 0,
     transition: {
       duration: SEARCH_PROMPT_EXIT_DURATION_SECONDS,
       ease: SEARCH_PROMPT_EXIT_EASE,
     },
-    y: -SEARCH_PROMPT_Y_OFFSET_PX,
+    y: SEARCH_PROMPT_NEGATIVE_Y_OFFSET,
   },
   initial: {
-    filter: `blur(${SEARCH_PROMPT_BLUR_PX}px)`,
+    filter: `blur(${SEARCH_PROMPT_BLUR})`,
     opacity: 0,
-    y: SEARCH_PROMPT_Y_OFFSET_PX,
+    y: SEARCH_PROMPT_Y_OFFSET,
   },
 };
 

desktop/src/features/search/ui/TopbarSearch.tsx

@@ -753,7 +753,7 @@ export function TopbarSearch({
     ) : (
       <div
         aria-label="Recent activity"
-        className="max-h-[420px] overflow-y-auto p-1.5"
+        className="max-h-96 overflow-y-auto p-1.5"
         role="listbox"
       >
         {(() => {
@@ -795,7 +795,7 @@ export function TopbarSearch({
       No matches for <span className="font-semibold">{trimmedQuery}</span>.
     </p>
   ) : (
-    <div className="max-h-[420px] overflow-y-auto p-1.5" role="listbox">
+    <div className="max-h-96 overflow-y-auto p-1.5" role="listbox">
       {renderSearchResultSections(searchResultSections)}
     </div>
   );
@@ -807,7 +807,7 @@ export function TopbarSearch({
           aria-label="Search everything"
           className={
             isIconVariant
-              ? "group/search flex size-6 items-center justify-center rounded-[4px] p-1 text-sidebar-foreground/50 transition-colors hover:bg-sidebar-border/35 hover:text-sidebar-foreground focus-visible:bg-sidebar-border/35 focus-visible:text-sidebar-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-sidebar-ring"
+              ? "group/search flex size-6 items-center justify-center rounded p-1 text-sidebar-foreground/50 transition-colors hover:bg-sidebar-border/35 hover:text-sidebar-foreground focus-visible:bg-sidebar-border/35 focus-visible:text-sidebar-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-sidebar-ring"
               : "group/search flex h-7 w-full items-center gap-2 rounded-lg bg-sidebar-border/20 px-2 text-left text-xs text-sidebar-foreground/55 transition-colors duration-150 ease-out hover:bg-sidebar-border/35 hover:text-sidebar-foreground focus-visible:bg-sidebar-border/35 focus-visible:text-sidebar-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-sidebar-ring"
           }
           data-testid="open-search"