fix: card style

blinko-space · Dec 1, 2024 · 96a806d · 96a806d
1 parent af14d6d
commit 96a806d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 37 deletions.
diff --git a/src/components/BlinkoCard/expandContainer.tsx b/src/components/BlinkoCard/expandContainer.tsx
@@ -1,54 +1,33 @@
 import { motion } from "framer-motion";
-import { createPortal } from "react-dom";
 
 interface ExpandableContainerProps {
   isExpanded: boolean;
   children: React.ReactNode;
 }
 
 export const ExpandableContainer = ({ isExpanded, children }: ExpandableContainerProps) => {
-  if (isExpanded) {
-    return createPortal(
-      <motion.div
-        className='w-full expand-container fixed inset-0'
-        style={{
-          boxShadow: '0 0 15px -5px #5858581a',
-          backgroundColor: 'var(--background)',
-          zIndex: 9999,
-        }}
-        layout
-        initial={{ scale: 0.8, opacity: 0 }}
-        animate={{
-          width: "100vw",
-          height: "100vh",
-          scale: 1,
-          opacity: 1
-        }}
-        exit={{ scale: 0.8, opacity: 0 }}
-        transition={{
-          type: "spring",
-          damping: 20,
-          stiffness: 300,
-          mass: 0.6,
-        }}
-      >
-        {children}
-      </motion.div>,
-      document.body
-    );
-  }
-
   return (
     <motion.div
-      className='w-full expand-container'
+      className='w-full'
       style={{
         boxShadow: '0 0 15px -5px #5858581a',
-        position: 'relative',
+        position: isExpanded ? 'fixed' : 'relative',
+        top: isExpanded ? 0 : 'auto',
+        left: isExpanded ? 0 : 'auto',
+        zIndex: isExpanded ? 50 : 1,
       }}
       layout
-      initial={{ opacity: 1 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
+      animate={{
+        width: isExpanded ? "100vw" : "100%",
+        height: isExpanded ? "100vh" : "auto",
+        scale: isExpanded ? 1 : 1,
+      }}
+      transition={{
+        type: "spring",
+        damping: 20,
+        stiffness: 300,
+        mass: 0.6,
+      }}
     >
       {children}
     </motion.div>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -51,6 +51,7 @@
 /* Fix card height  */
 .layout-container>div {
   height: 100%;
+  z-index: 10;
 }
 
 html,