increase leaderboard row height on mobile??

acmucsd · Oct 22, 2024 · ba754b0 · ba754b0
1 parent 1e76423
commit ba754b0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/components/onboarding/Leaderboard/index.tsx b/src/components/onboarding/Leaderboard/index.tsx
@@ -73,7 +73,7 @@ const Leaderboard = ({ user }: LeaderboardProps) => {
   }, [userPoints]);
 
   return (
-    <div className={styles.wrapper} style={{ height: `${users.length * 4}rem` }}>
+    <div className={styles.wrapper} style={{ height: `calc(${users.length} * var(--leaderboard-height))` }}>
       {users.map(({ name, points, image }) => {
         const position = sorted.indexOf(name);
         return (

diff --git a/src/components/onboarding/Leaderboard/style.module.scss b/src/components/onboarding/Leaderboard/style.module.scss
@@ -4,12 +4,18 @@
   border-radius: 0.5rem;
   overflow: hidden;
   position: relative;
+  --leaderboard-height: 4rem;
+
+  @media (max-width: vars.$breakpoint-sm) {
+    --leaderboard-height: 6rem;
+  }
 
   .row {
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
     transition: transform 0.2s;
+    height: var(--leaderboard-height);
   }
 }