From abc4ca38ee81eb38488ce45ceb7e0f500f190d99 Mon Sep 17 00:00:00 2001
From: braddf <bradbdf@gmail.com>
Date: Mon, 11 Nov 2024 17:38:19 +0000
Subject: [PATCH] fix ugly scrollbars bug

---
 .../charts/delta-view/delta-view-chart.tsx    |  6 ++---
 .../solar-site-view/solar-site-chart.tsx      | 10 ++++----
 .../components/side-layout/index.tsx          |  2 +-
 apps/nowcasting-app/styles/globals.css        | 25 +++++++++++++++++++
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/apps/nowcasting-app/components/charts/delta-view/delta-view-chart.tsx b/apps/nowcasting-app/components/charts/delta-view/delta-view-chart.tsx
index 268b7779..0c34e6b9 100644
--- a/apps/nowcasting-app/components/charts/delta-view/delta-view-chart.tsx
+++ b/apps/nowcasting-app/components/charts/delta-view/delta-view-chart.tsx
@@ -374,9 +374,9 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
           </div>
         )}
         <div
-          className={`flex flex-col flex-grow-0 flex-shrink overflow-y-scroll ${
-            clickedGspId ? "h-[30%]" : "h-[40%]"
-          }`}
+          className={`flex flex-col flex-grow-0 flex-shrink${
+            hasGspPvInitialForSelectedTime ? " overflow-y-scroll" : ""
+          } ${clickedGspId ? "h-[30%]" : "h-[40%]"}`}
         >
           <DeltaBuckets bucketSelection={selectedBuckets} gspDeltas={gspDeltas} />
           {!hasGspPvInitialForSelectedTime && (
diff --git a/apps/nowcasting-app/components/charts/solar-site-view/solar-site-chart.tsx b/apps/nowcasting-app/components/charts/solar-site-view/solar-site-chart.tsx
index ae047465..573e433a 100644
--- a/apps/nowcasting-app/components/charts/solar-site-view/solar-site-chart.tsx
+++ b/apps/nowcasting-app/components/charts/solar-site-view/solar-site-chart.tsx
@@ -324,30 +324,30 @@ const SolarSiteChart: FC<{
           </div>
         )}
 
-        <div className="flex-1 flex flex-col overflow-y-scroll relative">
+        <div className="flex-1 flex flex-col relative">
           <AggregatedDataTable
-            className={`absolute inset-0 overflow-y-scroll pb-16 ${
+            className={`absolute inset-0 overflow-y-scroll mb-12 ${
               currentAggregation(AGGREGATION_LEVELS.NATIONAL) ? "z-10" : "z-0 opacity-0"
             }`}
             title={"National"}
             tableData={Array.from(aggregatedSitesData.national.values())}
           />
           <AggregatedDataTable
-            className={`absolute inset-0 overflow-y-scroll pb-16 ${
+            className={`absolute inset-0 overflow-y-scroll mb-12 ${
               currentAggregation(AGGREGATION_LEVELS.REGION) ? "z-10" : "z-0 opacity-0"
             }`}
             title={"Region"}
             tableData={Array.from(aggregatedSitesData.regions.values())}
           />
           <AggregatedDataTable
-            className={`absolute inset-0 overflow-y-scroll pb-16 ${
+            className={`absolute inset-0 overflow-y-scroll mb-12 ${
               currentAggregation(AGGREGATION_LEVELS.GSP) ? "z-10" : "z-0 opacity-0"
             }`}
             title={"GSP"}
             tableData={Array.from(aggregatedSitesData.gsps.values())}
           />
           <AggregatedDataTable
-            className={`absolute inset-0 overflow-y-scroll pb-16 ${
+            className={`absolute inset-0 overflow-y-scroll mb-12 ${
               currentAggregation(AGGREGATION_LEVELS.SITE) ? "z-10" : "z-0 opacity-0"
             }`}
             title={"Sites"}
diff --git a/apps/nowcasting-app/components/side-layout/index.tsx b/apps/nowcasting-app/components/side-layout/index.tsx
index f998a76d..430c3c64 100644
--- a/apps/nowcasting-app/components/side-layout/index.tsx
+++ b/apps/nowcasting-app/components/side-layout/index.tsx
@@ -44,7 +44,7 @@ const SideLayout: FC<SideLayoutProps> = ({
           "focus:outline-none h-full text-white justify-between flex flex-col bg-mapbox-black-500 z-20 "
         }
       >
-        <div className={`min-h-full max-h-full flex flex-col overflow-y-scroll`}>{children}</div>
+        <div className={`min-h-full max-h-full flex flex-col`}>{children}</div>
       </div>
       <div className="absolute bottom-12 -right-4 h-10 z-20">
         <ExpandButton isOpen={isOpen} onClick={() => setIsOpen((o) => !o)} />
diff --git a/apps/nowcasting-app/styles/globals.css b/apps/nowcasting-app/styles/globals.css
index 2e25745e..b8834b20 100644
--- a/apps/nowcasting-app/styles/globals.css
+++ b/apps/nowcasting-app/styles/globals.css
@@ -114,3 +114,28 @@
   overflow: hidden;
   visibility: hidden;
 }
+
+/**************/
+/* SCROLLBARS */
+/**************/
+
+/* Works on Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: theme(colors.mapbox-black.700) theme(colors.mapbox-black.600);
+}
+
+/* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 12px;
+}
+
+*::-webkit-scrollbar-track {
+  background: theme(colors.mapbox-black.600);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: theme(colors.mapbox-black.700);
+  border-radius: 20px;
+  border: 3px solid theme(colors.mapbox-black.600);
+}