Fix sidebar styling

src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { Card } from '@mantine/core';
+import { Card, Group, Stack } from '@mantine/core';
 import { RefObject } from 'react';
 import { useCardStyles } from '../../../layout/useCardStyles';
 import { useGridstack } from '../gridstack/use-gridstack';
@@ -9,18 +9,24 @@ interface DashboardSidebarProps extends DashboardSidebarInnerProps {
   isGridstackReady: boolean;
 }
 
-export const DashboardSidebar = ({ location, isGridstackReady }: DashboardSidebarProps) => (
+export const DashboardSidebar = ({ location, isGridstackReady }: DashboardSidebarProps) => {
+  const {
+    cx,
+    classes: { card: cardClass },
+  } = useCardStyles(false);
+
+  return (
     <Card
-    withBorder
+      p={0}
+      m={0}
+      radius="lg"
+      className={cardClass}
       w={300}
-    style={{
-      background: 'none',
-      borderStyle: 'dashed',
-    }}
     >
       {isGridstackReady && <SidebarInner location={location} />}
     </Card>
   );
+};
 
 interface DashboardSidebarInnerProps {
   location: 'right' | 'left';
@@ -37,17 +43,18 @@ const SidebarInner = ({ location }: DashboardSidebarInnerProps) => {
   } = useCardStyles(false);
 
   return (
-    <Card withBorder mih="100%" p={0} radius="lg" className={cardClass} ref={refs.wrapper}>
     <div
+      ref={refs.wrapper}
       className="grid-stack grid-stack-sidebar"
-        style={{ transitionDuration: '0s', height: '100%' }}
+      style={{
+        transitionDuration: '0s',
+      }}
       data-sidebar={location}
       // eslint-disable-next-line react/no-unknown-property
       gs-min-row={minRow}
     >
       <WrapperContent apps={apps} refs={refs} widgets={widgets} />
     </div>
-    </Card>
   );
 };