fix responsive layout for profile components

Hartaithan · Feb 7, 2024 · c7f214a · c7f214a
1 parent 98c491e
commit c7f214a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/components/ProfileBlock/ProfileBlock.module.css b/components/ProfileBlock/ProfileBlock.module.css
@@ -24,6 +24,32 @@
   flex-direction: column;
 }
 
+.name {
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  @media (max-width: $mantine-breakpoint-md) {
+    justify-content: center;
+  }
+}
+
+.presence {
+  flex-wrap: wrap;
+  @media (max-width: $mantine-breakpoint-md) {
+    justify-content: center;
+  }
+  @media (max-width: $mantine-breakpoint-sm) {
+    gap: 0px;
+  }
+}
+
+.presence > p {
+  text-align: center;
+  @media (max-width: $mantine-breakpoint-sm) {
+    margin: 0px;
+  }
+}
+
 .profile {
   margin-left: auto;
   flex-wrap: wrap;

diff --git a/components/ProfileBlock/ProfileBlock.tsx b/components/ProfileBlock/ProfileBlock.tsx
@@ -33,14 +33,16 @@ const ProfileBlock: FC<ProfileBlockProps> = (props) => {
         alt="avatar"
       />
       <Flex className={classes.psn}>
-        <Flex align="center">
+        <Flex className={classes.name}>
           <Text fz="xl" fw={700}>
             {name}
           </Text>
           {psn?.plus === 1 && <PlusBadge ml="sm" />}
         </Flex>
-        <Flex gap="sm">
-          <Text fw={600}>{psn?.onlineId ?? "PSN ID Not Found"}</Text>
+        <Flex className={classes.presence}>
+          <Text fw={600} mr="sm">
+            {psn?.onlineId ?? "PSN ID Not Found"}
+          </Text>
           {presence != null && <Text c="dimmed">{presence}</Text>}
         </Flex>
         {psn?.aboutMe != null && psn.aboutMe.trim().length > 0 && (

diff --git a/components/TrophiesStats/TrophiesStats.module.css b/components/TrophiesStats/TrophiesStats.module.css
@@ -1,5 +1,6 @@
 .container {
   width: 100%;
+  flex: 2;
   gap: var(--mantine-spacing-md);
   @media (max-width: $mantine-breakpoint-md) {
     flex-direction: column;
@@ -8,6 +9,8 @@
 
 .content {
   flex: 1;
+  width: 50%;
+  flex-wrap: wrap;
   background: var(--mantine-color-primary-7);
   border-radius: var(--mantine-radius-lg);
   padding-top: var(--mantine-spacing-lg);
@@ -16,7 +19,9 @@
   padding-right: var(--mantine-spacing-xl);
   align-items: center;
   justify-content: space-evenly;
+  gap: var(--mantine-spacing-md);
   @media (max-width: $mantine-breakpoint-md) {
+    width: 100%;
     flex-wrap: wrap;
     padding-top: var(--mantine-spacing-md);
     padding-bottom: var(--mantine-spacing-md);