fix ugly scrollbars bug

openclimatefix · Nov 11, 2024 · abc4ca3 · abc4ca3
1 parent 10088fb
commit abc4ca3
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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);
+}