board preview page responsive layout

Hartaithan · Jan 23, 2024 · 663bfb6 · 663bfb6 · vercel · Jan 23, 2024
1 parent 279d9ff
commit 663bfb6
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/app/(auth)/board/[username]/page.tsx b/app/(auth)/board/[username]/page.tsx
@@ -34,7 +34,7 @@ const BoardPage: Page<BoardParams> = async ({
   const initializedBoard = initializeBoard(board);
 
   return (
-    <Flex direction="column" h="100%" pt="md" pb="xl">
+    <Flex direction="column" h="100%" pt="md" pb={{ base: "md", md: "xl" }}>
       <Title order={3} mb="sm" tt="capitalize">
         {username}&apos;s board
       </Title>

diff --git a/components/BoardColumn/BoardColumn.module.css b/components/BoardColumn/BoardColumn.module.css
@@ -3,7 +3,7 @@
   padding: var(--mantine-spacing-xs);
   background: var(--mantine-color-primary-7);
   border-radius: var(--mantine-radius-lg);
-  min-width: 300;
+  min-width: 300px;
   flex: 1;
 }
 

diff --git a/components/BoardPreview/BoardPreview.module.css b/components/BoardPreview/BoardPreview.module.css
@@ -1,5 +1,16 @@
 .container {
   flex: 1;
+  height: 100%;
+  gap: var(--mantine-spacing-xl);
+  @media (max-width: $mantine-breakpoint-xl) {
+    gap: var(--mantine-spacing-md);
+  }
+  @media (max-width: $mantine-breakpoint-lg) {
+    gap: var(--mantine-spacing-sm);
+  }
+  @media (max-width: $mantine-breakpoint-md) {
+    flex-direction: column;
+  }
 }
 
 .private {
@@ -8,3 +19,7 @@
   justify-content: center;
   align-items: center;
 }
+
+.private > p {
+  text-align: center;
+}
diff --git a/components/BoardPreview/BoardPreview.tsx b/components/BoardPreview/BoardPreview.tsx
@@ -34,8 +34,10 @@ const BoardPreview: FC<Props> = (props) => {
       ) : (
         <Flex className={classes.private}>
           <IconMoodSadDizzy size={120} />
-          <Title order={3}>Board not exist!</Title>
-          <Text c="dimmed">
+          <Title mt="xs" order={3}>
+            Board not exist!
+          </Title>
+          <Text mt="xs" c="dimmed">
             Or the user is restricted from accessing their board.
           </Text>
         </Flex>

diff --git a/components/Header/Header.module.css b/components/Header/Header.module.css
@@ -56,7 +56,7 @@ a.disabledLink {
 }
 
 .profile {
-  min-width: 100;
+  min-width: 100px;
   display: flex;
   align-items: center;
   justify-content: flex-end;