css fixes

apps/client/src/components/layouts/dashboard/aside.tsx

@@ -2,13 +2,13 @@ import { Box, ScrollArea, Text } from "@mantine/core";
 import CommentList from "@/features/comment/components/comment-list.tsx";
 import { useAtom } from "jotai";
 import { asideStateAtom } from "@/components/navbar/atoms/sidebar-atom.ts";
-import React from "react";
+import React, { ReactNode } from "react";
 
 export default function Aside() {
   const [{ tab }] = useAtom(asideStateAtom);
 
-  let title;
-  let component;
+  let title: string;
+  let component: ReactNode;
 
   switch (tab) {
     case "comments":

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

@@ -8,9 +8,9 @@
 }
 
 .aside {
-  @media (min-width: 993px) {
-    background: var(--mantine-color-gray-light);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
 
+  @media (min-width: 993px) {
     [data-layout="alt"] & {
       --_section-top: var(--_section-top, var(--app-shell-header-offset, 0px));
       --_section-height: var(
@@ -35,3 +35,4 @@
     width: 300px;
   }
 }
+

apps/client/src/components/layouts/dashboard/shell.tsx

@@ -79,7 +79,7 @@ export default function Shell({ children }: { children: React.ReactNode }) {
       <AppShell.Main>{children}</AppShell.Main>
 
       {isPageRoute && (
-        <AppShell.Aside className={classes.aside}>
+        <AppShell.Aside className={classes.aside} withBorder={false}>
           <Aside />
         </AppShell.Aside>
       )}