Add styles to base page

packages/renderer/src/features/shared/components/animated-page.tsx

@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, Ref } from 'react';
+import { forwardRef } from 'react';
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
 
@@ -7,8 +8,12 @@ interface AnimatedPageProps {
 }
 
 const StyledAnimatedPage = styled(motion.div)`
+  position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 `;
 
 const variants = {
@@ -17,16 +22,19 @@ const variants = {
   initial: { opacity: 0 },
 };
 
-export const AnimatedPage = ({ children }: AnimatedPageProps) => {
-  return (
-    <StyledAnimatedPage
-      animate="animate"
-      exit="exit"
-      initial="initial"
-      transition={{ duration: 0.2, type: 'tween' }}
-      variants={variants}
-    >
-      {children}
-    </StyledAnimatedPage>
-  );
-};
+export const AnimatedPage = forwardRef(
+  ({ children }: AnimatedPageProps, ref: Ref<HTMLDivElement>) => {
+    return (
+      <StyledAnimatedPage
+        ref={ref}
+        animate="animate"
+        exit="exit"
+        initial="initial"
+        transition={{ duration: 0.2, type: 'tween' }}
+        variants={variants}
+      >
+        {children}
+      </StyledAnimatedPage>
+    );
+  },
+);