From 6475db133a05fd603bc76cdbe8045cc0fcd776fd Mon Sep 17 00:00:00 2001
From: Dustin Brett <dustinbrett@gmail.com>
Date: Thu, 28 Mar 2024 21:09:19 -0700
Subject: [PATCH] Stabalize search pixel shift when zoomed

---
 .../system/Taskbar/Search/StyledResults.ts    |  5 +-
 .../system/Taskbar/Search/StyledSearch.ts     |  6 ++-
 .../system/Taskbar/Search/StyledSections.ts   |  6 ++-
 .../system/Taskbar/Search/StyledTabs.ts       |  1 +
 .../Search/useSearchInputTransition.ts        | 54 +++++++++++--------
 styles/defaultTheme/sizes.ts                  |  2 +
 6 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/components/system/Taskbar/Search/StyledResults.ts b/components/system/Taskbar/Search/StyledResults.ts
index 4a8d36a5..a2853658 100644
--- a/components/system/Taskbar/Search/StyledResults.ts
+++ b/components/system/Taskbar/Search/StyledResults.ts
@@ -6,7 +6,10 @@ import { THIN_SCROLLBAR_WIDTH } from "utils/constants";
 const StyledResults = styled.div`
   color: #fff;
   display: flex;
-  height: calc(100% - 52px);
+  height: ${({ theme }) =>
+    `calc(100% - ${theme.sizes.search.headerHeight}px - ${theme.sizes.search.inputHeight}px)`};
+  position: absolute;
+  top: ${({ theme }) => `${theme.sizes.search.headerHeight}px`};
   width: 100%;
 
   .list {
diff --git a/components/system/Taskbar/Search/StyledSearch.ts b/components/system/Taskbar/Search/StyledSearch.ts
index 852581b7..03bfd0d0 100644
--- a/components/system/Taskbar/Search/StyledSearch.ts
+++ b/components/system/Taskbar/Search/StyledSearch.ts
@@ -89,9 +89,13 @@ const StyledSearch = styled(motion.nav)<StyledSearchProps>`
       color: rgb(175, 175, 175);
       display: flex;
       flex-direction: column;
-      height: calc(100% - 52px);
+      height: ${({ theme }) =>
+        `calc(100% - ${theme.sizes.search.headerHeight}px - ${theme.sizes.search.inputHeight}px)`};
       place-content: center;
       place-items: center;
+      position: absolute;
+      top: ${({ theme }) => `${theme.sizes.search.headerHeight}px`};
+      width: 100%;
 
       h1 {
         font-size: 28px;
diff --git a/components/system/Taskbar/Search/StyledSections.ts b/components/system/Taskbar/Search/StyledSections.ts
index d77586f8..6a77fe19 100644
--- a/components/system/Taskbar/Search/StyledSections.ts
+++ b/components/system/Taskbar/Search/StyledSections.ts
@@ -12,10 +12,14 @@ const StyledSections = styled.div<StyledSectionsProps>`
   ${ThinScrollBars}
   color: #fff;
   display: flex;
-  height: calc(100% - 52px);
+  height: ${({ theme }) =>
+    `calc(100% - ${theme.sizes.search.headerHeight}px - ${theme.sizes.search.inputHeight}px)`};
   overflow: hidden;
   place-content: space-evenly;
   place-items: start;
+  position: absolute;
+  top: ${({ theme }) => `${theme.sizes.search.headerHeight}px`};
+  width: 100%;
 
   @media (hover: none), (pointer: coarse) {
     overflow-y: scroll;
diff --git a/components/system/Taskbar/Search/StyledTabs.ts b/components/system/Taskbar/Search/StyledTabs.ts
index f8d11cc1..fb88dc62 100644
--- a/components/system/Taskbar/Search/StyledTabs.ts
+++ b/components/system/Taskbar/Search/StyledTabs.ts
@@ -8,6 +8,7 @@ const StyledTabs = styled.ol`
   font-weight: 600;
   gap: 1px;
   padding: 2px 13px 0;
+  position: absolute;
 
   li {
     color: rgb(215, 215, 215);
diff --git a/components/system/Taskbar/Search/useSearchInputTransition.ts b/components/system/Taskbar/Search/useSearchInputTransition.ts
index e8438cc7..f67db902 100644
--- a/components/system/Taskbar/Search/useSearchInputTransition.ts
+++ b/components/system/Taskbar/Search/useSearchInputTransition.ts
@@ -1,31 +1,39 @@
 import { type MotionProps } from "framer-motion";
+import { useTheme } from "styled-components";
 import { TRANSITIONS_IN_SECONDS } from "utils/constants";
 
-const useSearchInputTransition = (): MotionProps => ({
-  animate: "active",
-  exit: {
-    bottom: "-40px",
-    position: "absolute",
+const useSearchInputTransition = (): MotionProps => {
+  const {
+    sizes: { search },
+  } = useTheme();
+  const negativeInputHeight = `-${search.inputHeight}px`;
+
+  return {
+    animate: "active",
+    exit: {
+      bottom: negativeInputHeight,
+      position: "absolute",
+      transition: {
+        duration: TRANSITIONS_IN_SECONDS.TASKBAR_ITEM / 10,
+        ease: "easeIn",
+      },
+    },
+    initial: "initial",
     transition: {
-      duration: TRANSITIONS_IN_SECONDS.TASKBAR_ITEM / 10,
-      ease: "easeIn",
+      duration: TRANSITIONS_IN_SECONDS.TASKBAR_ITEM / 1,
+      ease: "easeOut",
     },
-  },
-  initial: "initial",
-  transition: {
-    duration: TRANSITIONS_IN_SECONDS.TASKBAR_ITEM / 1,
-    ease: "easeOut",
-  },
-  variants: {
-    active: {
-      bottom: 0,
-      position: "absolute",
+    variants: {
+      active: {
+        bottom: 0,
+        position: "absolute",
+      },
+      initial: {
+        bottom: negativeInputHeight,
+        position: "absolute",
+      },
     },
-    initial: {
-      bottom: "-40px",
-      position: "absolute",
-    },
-  },
-});
+  };
+};
 
 export default useSearchInputTransition;
diff --git a/styles/defaultTheme/sizes.ts b/styles/defaultTheme/sizes.ts
index 00ecaa3e..fd8271d5 100644
--- a/styles/defaultTheme/sizes.ts
+++ b/styles/defaultTheme/sizes.ts
@@ -30,6 +30,8 @@ const sizes = {
     rowGap: "28px",
   },
   search: {
+    headerHeight: 52,
+    inputHeight: 40,
     maxHeight: 415,
     size: 600,
   },