fix: height issue

hyperweb-io · Nov 16, 2023 · aac2342 · aac2342
1 parent 6dee1b0
commit aac2342
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/src/ui/liquid-staking/liquid-staking.css.ts b/src/ui/liquid-staking/liquid-staking.css.ts
@@ -1,26 +1,29 @@
 import { styleVariants, keyframes } from "@vanilla-extract/css";
 
+const EXPANDED_HEIGHT_PX = `458px`;
+const CONTRACTED_HEIGHT_PX = `32px`;
+
 const expandVertical = keyframes({
-  "0%": { opacity: "0", height: "32px" },
-  "100%": { opacity: "1", height: "480px" },
+  "0%": { opacity: "0", height: CONTRACTED_HEIGHT_PX },
+  "100%": { opacity: "1", height: EXPANDED_HEIGHT_PX },
 });
 
 const expandVerticalReverse = keyframes({
-  "0%": { height: "480px" },
-  "100%": { height: "32px" },
+  "0%": { height: EXPANDED_HEIGHT_PX },
+  "100%": { height: CONTRACTED_HEIGHT_PX },
 });
 
 export const accordionPanel = styleVariants({
   expanded: [
     {
-      height: 480,
+      height: EXPANDED_HEIGHT_PX,
       overflow: "auto",
       animation: `${expandVertical} 450ms cubic-bezier(0.22, 1, 0.36, 1)`,
     },
   ],
   contracted: [
     {
-      height: 32,
+      height: CONTRACTED_HEIGHT_PX,
       opacity: 1,
       overflow: "hidden",
       animation: `${expandVerticalReverse} 600ms cubic-bezier(0.22, 1, 0.36, 1)`,