Merge pull request #439 from BinaryStudioAcademy/fix/wr-436-sections-…

…jumping-on-profile-page wr-436: Check small sections jumping on Profile page
BinaryStudioAcademy · Sep 29, 2023 · 549bba1 · 549bba1
2 parents ce30887 + be68f3c
commit 549bba1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/frontend/src/pages/profile/components/user-achievements/styles.module.scss b/frontend/src/pages/profile/components/user-achievements/styles.module.scss
@@ -89,14 +89,6 @@
 }
 
 @media only screen and (max-width: breakpoints.$small) {
-  .achievementBlock {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    row-gap: 10px;
-    padding: 15px;
-  }
-
   .achievementListModal {
     --achievement-columns: 3;
 

diff --git a/frontend/src/pages/profile/profile-page.tsx b/frontend/src/pages/profile/profile-page.tsx
@@ -42,7 +42,12 @@ const ProfilePage: React.FC = () => {
           className={getValidClassNames(styles.userInfo, styles.profileBlock)}
         />
         <Spoiler breakpoint={WindowBreakpoint.MEDIUM} summary="Achievements">
-          <UserAchievements className={styles.profileBlock} />
+          <UserAchievements
+            className={getValidClassNames(
+              styles.profileBlock,
+              styles.achievements,
+            )}
+          />
         </Spoiler>
         <Spoiler
           breakpoint={WindowBreakpoint.MEDIUM}

diff --git a/frontend/src/pages/profile/styles.module.scss b/frontend/src/pages/profile/styles.module.scss
@@ -4,7 +4,7 @@
   display: grid;
   grid-template:
     "activity activity info" minmax(305px, max-content)
-    "articles genres achievements" minmax(491px, max-content) / 1fr 1fr 1fr;
+    "articles genres achievements" minmax(497px, max-content) / 1fr 1fr 1fr;
   gap: 20px 20px;
   width: 100%;
   margin: 0 auto;
@@ -21,7 +21,7 @@
     grid-template:
       "achievements info" minmax(305px, max-content)
       "activity activity" minmax(305px, max-content)
-      "articles genres" minmax(491px, max-content) / 1fr 1fr;
+      "articles genres" minmax(495px, max-content) / 1fr 1fr;
   }
 
   .userInfo {
@@ -40,6 +40,10 @@
     max-width: 600px;
   }
 
+  .achievements {
+    min-height: 244px;
+  }
+
   .activity {
     padding: 10px 30px 10px 10px;
   }
@@ -70,6 +74,12 @@
     padding: 12px 10px 15px;
   }
 
+  .achievements {
+    row-gap: 10px;
+    min-height: 200px;
+    padding: 15px;
+  }
+
   .stats {
     min-height: 426px;
     padding: 10px;