From 735b0e6b96c7262a57ce7b79dcd4d00d59858042 Mon Sep 17 00:00:00 2001
From: "Ignacio Ceballos (Yayo)" <yceballost@gmail.com>
Date: Sat, 23 Nov 2024 15:39:53 +0100
Subject: [PATCH] sticky sidebar in progress page

---
 .../pages/progress-view.jsx                   | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/pages/advent-calendar-2024/pages/progress-view.jsx b/src/pages/advent-calendar-2024/pages/progress-view.jsx
index 898aa25274..e34aa89a4e 100644
--- a/src/pages/advent-calendar-2024/pages/progress-view.jsx
+++ b/src/pages/advent-calendar-2024/pages/progress-view.jsx
@@ -303,25 +303,29 @@ const ProgressView = () => {
                 </Stack>
               }
               right={
-                <Grid columns={4} alignContent>
-                  <GridItem columnSpan={3} columnStart={2}>
-                    <Stack space={56}>
-                      <AchievementList
-                        completedAchievementsCount={completedAchievementsCount}
-                        totalAchievements={totalAchievements}
-                      />
-                      <Stack space={16}>
-                        <Inline space={8} alignItems="center">
-                          <IconInvader size={20}></IconInvader>
-                          <Text4>Total game points</Text4>
-                        </Inline>
-                        <Text size={80} lineHeight={80} weight="medium">
-                          {totalGamePoints}
-                        </Text>
+                <div style={{ position: "sticky", height: "100vh", top: 80 }}>
+                  <Grid columns={4} alignContent>
+                    <GridItem columnSpan={3} columnStart={2}>
+                      <Stack space={56}>
+                        <AchievementList
+                          completedAchievementsCount={
+                            completedAchievementsCount
+                          }
+                          totalAchievements={totalAchievements}
+                        />
+                        <Stack space={16}>
+                          <Inline space={8} alignItems="center">
+                            <IconInvader size={20}></IconInvader>
+                            <Text4>Total game points</Text4>
+                          </Inline>
+                          <Text size={80} lineHeight={80} weight="medium">
+                            {totalGamePoints}
+                          </Text>
+                        </Stack>
                       </Stack>
-                    </Stack>
-                  </GridItem>
-                </Grid>
+                    </GridItem>
+                  </Grid>
+                </div>
               }
             ></GridLayout>