From 810a98a4b649130ab28c23d8e9ef073b6ed6b7a5 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 14 Dec 2022 19:17:35 -0800
Subject: [PATCH] Add styles to base page

---
 .../shared/components/animated-page.tsx       | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/renderer/src/features/shared/components/animated-page.tsx b/packages/renderer/src/features/shared/components/animated-page.tsx
index 5fffc94fd..bfe7aabd2 100644
--- a/packages/renderer/src/features/shared/components/animated-page.tsx
+++ b/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>
+    );
+  },
+);