clean styles

apps/app/src/components/Sidebar/Sidebar.module.scss

@@ -6,10 +6,9 @@
   height: 100vh;
   border-right : 1px solid var(--bs-border-color);
 
-  .grw-navigation-wrap {
+  .grw-sidebar-inner {
     display: flex;
     flex-direction: row;
-    height: 100%;
 
     border-top : 1px solid var(--bs-border-color);
   }

apps/app/src/components/Sidebar/Sidebar.tsx

@@ -92,7 +92,7 @@ export const SidebarSubstance = memo((): JSX.Element => {
   const disableResizing = isResizeDisabled || isDrawerMode || isCollapsedMode;
 
   return (
-    <div className="grw-navigation-wrap d-print-none">
+    <div className="grw-sidebar-inner d-print-none h-100">
       <SidebarNav />
       <div className="sidebar-contents-container">
         <ResizableArea

apps/app/src/components/Sidebar/SidebarHead/SidebarHead.module.scss

@@ -6,18 +6,15 @@
   // declare $height with the same value as the sidebar nav width
   $height: var.$grw-sidebar-nav-width;
 
-  // set position and z-index to prevent dropdowns covered by other element
-  position: relative;
-  z-index: bs.$zindex-fixed;
-
   height: $height;
-  border-right : 1px solid var(--bs-border-color);
 
   .grw-logo {
     $width: var.$grw-sidebar-nav-width;
     $logomark-width: 27.7px;
     $logomark-height: 24px;
 
+    width: $width;
+
     svg {
       width: $width;
       height: $height;

apps/app/src/components/Sidebar/SidebarHead/SidebarHead.tsx

@@ -19,11 +19,9 @@ export const SidebarHead: FC = memo(() => {
   return (
     <div className={styles['grw-sidebar-head']}>
       {/* Brand Logo  */}
-      <div className="navbar-brand">
-        <Link href="/" className="grw-logo d-block">
-          <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
-        </Link>
-      </div>
+      <Link href="/" className="grw-logo d-block">
+        <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
+      </Link>
     </div>
   );