Fix dashboard side scroll/styling

AppLayout.tsx, Subpanel.tsx, subpanel.module.css, EntitiesPanel.tsx, GraphPanel.tsx, MarketPanel.tsx, Subpanel.tsx, subpanel.module.css, index.module.css, and index.tsx

frontend/src/routes/AppLayout.tsx

@@ -36,7 +36,7 @@ export default function AppLayout() {
             showSidebar ? "translate-x-64" : "translate-x-12"
           )}
         >
-          <main id="main-view" className="flex-1 block h-screen relative w-full overflow-y-scroll">
+          <main id="main-view" className="flex-1 overflow-hidden h-screen">
             <Outlet />
           </main>
         </div>

frontend/src/routes/dashboard/_components/subpanel.module.css

@@ -1,11 +1,9 @@
 .subpanel-wrapper {
-  @apply mt-5 flex-col justify-between h-full 
+  @apply flex flex-col justify-between relative flex-shrink h-full pr-2;
 }
-
-.subpanel {
-  @apply flex flex-col pb-2 first:pt-8 
+.subpanel-section {
+  @apply py-1 px-1 flex flex-col;
 }
-
 .subpanel > p {
   @apply text-sm py-4 font-medium text-slate-500 focus:outline-none cursor-pointer px-2
 }
@@ -16,7 +14,6 @@
 .subpanel-header p {
   @apply text-sm px-1 font-black  leading-3 text-slate-600 focus:outline-none cursor-pointer
 }
-
 .subpanel-header svg {
   @apply h-5 w-5 mr-2 hover:rotate-3 origin-center text-slate-600 ml-auto transform focus:outline-none cursor-pointer 
 }
@@ -29,10 +26,6 @@
   @apply rotate-0;
 }
 
-.subpanel-section {
-  @apply overflow-x-clip overflow-y-hidden py-1 px-1;
-}
-
 .subpanel-link {
   @apply mb-1  focus:outline-none bg-transparent border rounded-md border-transparent hover:to-mirage-400/20 hover:bg-gradient-to-bl hover:border-mirage-700/70  hover:translate-x-px z-50 transition-transform   hover:from-mirage-400/10 text-slate-400 hover:text-slate-400/20 focus:bg-mirage-500/60 focus:text-slate-400/40  w-full  flex items-center -translate-x-px
 }

frontend/src/routes/dashboard/_components/tabs/EntitiesPanel.tsx

@@ -1,7 +1,7 @@
 import { useUpdateEntityFavoriteIdMutation } from "@src/app/api";
 import { useMemo, useState } from "react";
-import styles from "./subpanel.module.css"
-import Subpanel from "./Subpanel";
+import styles from "../subpanel.module.css"
+import Subpanel from "../Subpanel";
 
 
 export default function EntitiesPanel({

frontend/src/routes/dashboard/_components/tabs/GraphPanel.tsx

@@ -2,8 +2,8 @@ import { AllGraphsList, useUpdateGraphFavoriteIdMutation } from '@src/app/api';
 import { useMemo, useState } from "react";
 import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 import { SerializedError } from '@reduxjs/toolkit';
-import styles from "./subpanel.module.css"
-import Subpanel from './Subpanel';
+import styles from "../subpanel.module.css"
+import Subpanel from '../Subpanel';
 
 
 export function GraphLoaderCard() {

frontend/src/routes/dashboard/_components/tabs/MarketPanel.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import Subpanel from './Subpanel'
-import styles from './subpanel.module.css'
+import Subpanel from '../Subpanel'
+import styles from '../subpanel.module.css'
 
 export default function MarketPanel() {
   const [showProviders, setShowProviders] = useState(false)

frontend/src/routes/dashboard/index.module.css

@@ -1,6 +1,6 @@
 /* wraps the sidebar with search and the main view */
 .sidebar-wrapper {
-  @apply rounded py-px !min-w-[20rem] max-w-[20rem] flex flex-col w-full pt-3.5 pb-6 border-r-[3px] border-mirage-700/70 from-mirage-600/20 to-mirage-500/20 bg-gradient-to-br pl-2 max-h-screen justify-between shadow-xl 
+  @apply rounded py-px !min-w-[20rem] max-w-[20rem] flex-col h-screen pt-3.5  border-r-[3px] border-mirage-700/70 from-mirage-600/20 to-mirage-500/20 bg-gradient-to-br pl-2  justify-between shadow-xl flex relative w-full  overflow-y-scroll 
 }
 
 .search-container {
@@ -19,11 +19,11 @@
 }
 
 .dashboard-tabs {
-  @apply max-h-screen h-full overflow-y-scroll relative pr-2 
+  @apply overflow-y-hidden flex-grow h-full pb-12
 }
 
 .tabs-list {
-  @apply flex justify-between w-full rounded p-1 absolute;
+  @apply flex justify-between w-full rounded p-1 ;
 }
 .tab {
   @apply focus:outline-none transition-colors duration-200 ease-in-out flex items-center justify-center py-2.5 px-0 font-display rounded min-w-[6rem] text-sm leading-none z-20

frontend/src/routes/dashboard/index.tsx

@@ -88,7 +88,7 @@ export default function DashboardPage() {
 
   return (
     <>
-      <div className="flex max-h-screen h-full">
+      <div className="flex ">
         <aside className={styles["sidebar-wrapper"]}>
           <div className={styles["search-container"]}>
             <MagnifyingGlassIcon />
@@ -137,7 +137,7 @@ export default function DashboardPage() {
               </Tab>
               <div className={styles["tab-slider"]}></div>
             </Tab.List>
-            <section>
+            <section className="h-full overflow-y-scroll mb-20">
               <Tab.Panel className={styles["tab-panel"]}>
                 <GraphPanel
                   refetchGraphs={async () => await refetchGraphs()}
@@ -154,7 +154,7 @@ export default function DashboardPage() {
                   isError={isError}
                   isSuccess={isSuccess}
                   refetchEntities={refetchEntities}
-                  
+
                 />
               </Tab.Panel>
               <Tab.Panel className={styles["tab-panel"]}>
@@ -168,7 +168,7 @@ export default function DashboardPage() {
                 if (tabIndex === 0) setShowCreateGraphModal(true)
                 if (tabIndex === 1) setShowCreateEntityModal(true) // TODO
               }}
-              className='btn-primary mt-auto mx-4 mr-6'
+              className='btn-primary mt-auto mb-4 mx-4 mr-6'
             >
               Create {tabIndex === 0 ? 'graph' : 'entity'}
               <PlusIcon />