From 1fd4cd5e90825d64889820ce256398565e95f7ad Mon Sep 17 00:00:00 2001
From: Frank-Gu-81 <gushaopengfrank@gmail.com>
Date: Sat, 18 Jan 2025 22:48:59 -0600
Subject: [PATCH] rating history UI fix

---
 .../RatingHistory/RatingHistory.css           |  5 ++
 .../RatingHistory/RatingHistory.jsx           | 48 ++++++++++---------
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/components/RatingHistory/RatingHistory.css b/src/components/RatingHistory/RatingHistory.css
index 0b58663..e26dcea 100644
--- a/src/components/RatingHistory/RatingHistory.css
+++ b/src/components/RatingHistory/RatingHistory.css
@@ -2,4 +2,9 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+}
+
+.rating-history-page {
+    padding: 3em;
+    height: 100vh;
 }
\ No newline at end of file
diff --git a/src/components/RatingHistory/RatingHistory.jsx b/src/components/RatingHistory/RatingHistory.jsx
index 8bb2bb3..f4a48e8 100644
--- a/src/components/RatingHistory/RatingHistory.jsx
+++ b/src/components/RatingHistory/RatingHistory.jsx
@@ -46,33 +46,35 @@ function RatingHistory({ userName, profilePic }) {
     return (
         <div>
             <AppBar />
-            <Container maxWidth="xs" style={{ textAlign: 'center', paddingTop: '20px' }}>
-                <Box className="profile-box">
+            <Container className='rating-history-page'>
 
-                    <Avatar sx={{ width: 80, height: 80 }} src={profilePic} />
-                    <Typography variant="h5">{userName.displayName}</Typography> 
-                </Box>
-                <br />
-            </Container>
+                <Container maxWidth="xs" style={{ textAlign: 'center', paddingTop: '20px' }}>
+                    <Box className="profile-box">
 
+                        <Avatar sx={{ width: 80, height: 80 }} src={profilePic} />
+                        <Typography variant="h5">{userName.displayName}</Typography> 
+                    </Box>
+                    <br />
+                </Container>
 
-            <Container maxWidth="sm">
-                <Box paddingBottom="30px">
-                <Stack spacing={3}>
-                    { filteredPost.length === 0 ?
-                        (<p>Loading posts...</p>) :
-                        (filteredPost
-                            .slice()
-                            .sort((a, b) => b.date.seconds - a.date.seconds).map((post) => 
-                            <div key={post.id}>
-                            <Post post={post} friends={fake_friends} />
-                            </div>)
-                        )
-                    }
-                </Stack>
-                </Box>
+                <Container maxWidth="sm">
+                    <Box paddingBottom="30px">
+                    <Stack spacing={3}>
+                        { filteredPost.length === 0 ?
+                            (<p>Loading posts...</p>) :
+                            (filteredPost
+                                .slice()
+                                .sort((a, b) => b.date.seconds - a.date.seconds).map((post) => 
+                                <div key={post.id}>
+                                <Post post={post} friends={fake_friends} />
+                                </div>)
+                            )
+                        }
+                    </Stack>
+                    </Box>
+                </Container>
+                <NavigationBar />
             </Container>
-            <NavigationBar />
         </div>
     )