From cde87274c647e8eb9db91b2c07ba552021e81c5d Mon Sep 17 00:00:00 2001
From: "Kuchenik, Venessa J" <vkuchenik@contractor.usgs.gov>
Date: Wed, 23 Jul 2025 21:31:18 +0000
Subject: [PATCH] Copied and pasted most recent App.jsx into Dashboard.jsx

---
 client/src/components/layout/Dashboard.jsx | 88 +++++++++++++---------
 1 file changed, 52 insertions(+), 36 deletions(-)

diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx
index 11be033..ce97e00 100644
--- a/client/src/components/layout/Dashboard.jsx
+++ b/client/src/components/layout/Dashboard.jsx
@@ -13,42 +13,58 @@ export default function Dashboard() {
   const [view, setView] = useState("widget");
 
   return (
-  <>
-    <Global // change the background color of widget shadow when moving
-      styles={css`
-        .react-grid-placeholder {
-          background: #c0d2e3ff !important;
-          border-color: #a9b6c2ff !important;
-          box-shadow: 0 0 10px #c0d2e3ff !important;
-          opacity: 1 !important;
-          border-radius: 5px;
-        }
+    <>
+      <Global // change the background color of widget shadow when moving
+        styles={css`
+          .react-grid-placeholder {
+            background: #c0d2e3ff !important;
+            border-color: #a9b6c2ff !important;
+            box-shadow: 0 0 10px #c0d2e3ff !important;
+            opacity: 1 !important;
+            border-radius: 5px;
+          }
 
-        .react-resizable-handle-se {
-          position: sticky;
-          right: 0;
-          bottom: 0;
-        }
-      `}
-    />
-    <Grid css={styles}
-      templateRows="1fr 11fr"
-      templateColumns="1fr 20fr"
-      height="100vh"
-      width="100vw"
-    >
-      <GridItem rowSpan={1} colSpan={2}>
-        <Header />
-      </GridItem>
-      <GridItem colSpan={1}>
-        <Sidebar onChangeView={ setView } />
-      </GridItem>
-      <GridItem colSpan={1} width="100%">
-        <Canvas view={ view }/>
-      </GridItem> 
-    </Grid>
+          .react-resizable-handle-se {
+            position: absolute;
+            bottom: 0;
+            z-index: 1;
+            border-radius: 5px;
+          }
+
+          * {
+            scrollbar-width: thin;              /* Firefox */
+            scrollbar-color: #a0aec0 transparent; /* Firefox */
+          }
+
+          /* Chrome, Edge, Safari */
+          ::-webkit-scrollbar {
+            width: 8px;
+          }
+          ::-webkit-scrollbar-thumb {
+            background-color: rgba(100, 100, 100, 0.4);
+            border-radius: 4px;
+          }
+          ::-webkit-scrollbar-track {
+            background: transparent;
+          }
+        `}
+      />
+      <Grid css={styles}
+        templateRows="1fr 11fr"
+        templateColumns="1fr 20fr"
+        height="100vh"
+        width="100vw"
+      >
+        <GridItem rowSpan={1} colSpan={2}>
+          <Header />
+        </GridItem>
+        <GridItem colSpan={1}>
+          <Sidebar />
+        </GridItem>
+        <GridItem colSpan={1} width="100%">
+          <Canvas />
+        </GridItem> 
+      </Grid>
     </>
   );
-}
-
-
+}
\ No newline at end of file