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,9 +22,11 @@ const variants = {
   initial: { opacity: 0 },
 };
 
-export const AnimatedPage = ({ children }: AnimatedPageProps) => {
+export const AnimatedPage = forwardRef(
+  ({ children }: AnimatedPageProps, ref: Ref<HTMLDivElement>) => {
     return (
       <StyledAnimatedPage
+        ref={ref}
         animate="animate"
         exit="exit"
         initial="initial"
@@ -29,4 +36,5 @@ export const AnimatedPage = ({ children }: AnimatedPageProps) => {
         {children}
       </StyledAnimatedPage>
     );
-};
+  },
+);