cleanups

client/src/components/aside/aside.tsx

@@ -1,11 +1,10 @@
-import { Box, ScrollArea, Text, useMantineTheme } from '@mantine/core';
+import { Box, ScrollArea, Text } from '@mantine/core';
 import CommentList from '@/features/comment/components/comment-list';
 import { useAtom } from 'jotai';
 import { asideStateAtom } from '@/components/navbar/atoms/sidebar-atom';
 import React from 'react';
 
 export default function Aside() {
-  const theme = useMantineTheme();
   const [{ tab }] = useAtom(asideStateAtom);
 
   let title;
@@ -23,7 +22,7 @@ export default function Aside() {
 
 
   return (
-    <Box p="md" bg={theme.colors?.gray[1]}>
+    <Box p="md">
       {component && (
         <>
           <Text mb="md" fw={500}>{title}</Text>
@@ -31,7 +30,6 @@ export default function Aside() {
           <ScrollArea style={{ height: '85vh' }} scrollbarSize={5} type="scroll">
             <div style={{ paddingBottom: '200px' }}>
               {component}
-
             </div>
           </ScrollArea>
         </>

client/src/components/layouts/shell.module.css

@@ -1,20 +1,26 @@
-.header,
-.footer {
-   /* [data-layout='alt'] & {
-        --_section-right: var(--app-shell-aside-offset, 0px);
-    }
-    */
-}
+@media (max-width: 992px) {
+    .header,
+    .footer {
+        [data-layout='alt'] & {
+            --_section-right: var(--app-shell-aside-offset, 0px);
+        }
 
-.aside {
-    background: var(--mantine-color-gray-light);
-
-    [data-layout='alt'] & {
-        --_section-top: var(--_section-top, var(--app-shell-header-offset, 0px));
-        --_section-height: var(
-                --_section-height,
-                calc(100dvh - var(--app-shell-header-offset, 0px) - var(--app-shell-footer-offset, 0px))
-        );
     }
 }
 
+@media (min-width: 993px) {
+    .aside {
+        background: var(--mantine-color-gray-light);
+
+        [data-layout='alt'] & {
+            --_section-top: var(--_section-top, var(--app-shell-header-offset, 0px));
+            --_section-height: var(
+                    --_section-height,
+                    calc(100dvh - var(--app-shell-header-offset, 0px) - var(--app-shell-footer-offset, 0px))
+            );
+        }
+    }
+
+}
+
+