Stabalize search pixel shift when zoomed

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 {

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;

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;

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);

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 => ({
+const useSearchInputTransition = (): MotionProps => {
-  animate: "active",
+  const {
-  exit: {
+    sizes: { search },
-    bottom: "-40px",
+  } = useTheme();
-    position: "absolute",
+  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,
+      duration: TRANSITIONS_IN_SECONDS.TASKBAR_ITEM / 1,
-      ease: "easeIn",
+      ease: "easeOut",
     },
-  },
+    variants: {
-  initial: "initial",
+      active: {
-  transition: {
+        bottom: 0,
-    duration: TRANSITIONS_IN_SECONDS.TASKBAR_ITEM / 1,
+        position: "absolute",
-    ease: "easeOut",
+      },
-  },
+      initial: {
-  variants: {
+        bottom: negativeInputHeight,
-    active: {
+        position: "absolute",
-      bottom: 0,
+      },
-      position: "absolute",
     },
-    initial: {
+  };
-      bottom: "-40px",
+};
-      position: "absolute",
-    },
-  },
-});
 
 export default useSearchInputTransition;

styles/defaultTheme/sizes.ts

@@ -30,6 +30,8 @@ const sizes = {
     rowGap: "28px",
   },
   search: {
+    headerHeight: 52,
+    inputHeight: 40,
     maxHeight: 415,
     size: 600,
   },