fix squished sites view

openclimatefix · Oct 1, 2024 · 28643a9 · 28643a9
1 parent 497b134
commit 28643a9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
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,38 @@ const SolarSiteChart: FC<{
           </div>
         )}
 
-        <div className="flex-1 flex flex-col">
+        <div className="flex-1 flex flex-col overflow-y-scroll relative">
           <AggregatedDataTable
-            className={currentAggregation(AGGREGATION_LEVELS.NATIONAL) ? "" : "hidden"}
+            className={`absolute inset-0 overflow-y-scroll pb-16 ${
+              currentAggregation(AGGREGATION_LEVELS.NATIONAL) ? "z-10" : "z-0 opacity-0"
+            }`}
             title={"National"}
             tableData={Array.from(aggregatedSitesData.national.values())}
           />
           <AggregatedDataTable
-            className={currentAggregation(AGGREGATION_LEVELS.REGION) ? "" : "hidden"}
+            className={`absolute inset-0 overflow-y-scroll pb-16 ${
+              currentAggregation(AGGREGATION_LEVELS.REGION) ? "z-10" : "z-0 opacity-0"
+            }`}
             title={"Region"}
             tableData={Array.from(aggregatedSitesData.regions.values())}
           />
           <AggregatedDataTable
-            className={currentAggregation(AGGREGATION_LEVELS.GSP) ? "" : "hidden"}
+            className={`absolute inset-0 overflow-y-scroll pb-16 ${
+              currentAggregation(AGGREGATION_LEVELS.GSP) ? "z-10" : "z-0 opacity-0"
+            }`}
             title={"GSP"}
             tableData={Array.from(aggregatedSitesData.gsps.values())}
           />
           <AggregatedDataTable
-            className={currentAggregation(AGGREGATION_LEVELS.SITE) ? "" : "hidden"}
+            className={`absolute inset-0 overflow-y-scroll pb-16 ${
+              currentAggregation(AGGREGATION_LEVELS.SITE) ? "z-10" : "z-0 opacity-0"
+            }`}
             title={"Sites"}
             tableData={Array.from(aggregatedSitesData.sites.values())}
           />
         </div>
       </div>
-      <div className="absolute bottom-0 left-0 right-0 flex flex-none justify-between align-items:baseline px-4 text-xs tracking-wider text-ocf-gray-300 py-3 bg-mapbox-black-500 overflow-y-visible">
+      <div className="absolute bottom-0 left-0 right-0 z-10 flex flex-none justify-between align-items:baseline px-4 text-xs tracking-wider text-ocf-gray-300 py-3 bg-mapbox-black-500 overflow-y-visible">
         <div
           className={`flex flex-col lg:flex-row flex-initial gap-x-6 justify-around max-w-2xl overflow-x-auto`}
         >

diff --git a/apps/nowcasting-app/components/charts/solar-site-view/solar-site-tables.tsx b/apps/nowcasting-app/components/charts/solar-site-view/solar-site-tables.tsx
@@ -29,7 +29,7 @@ import { formatISODateString } from "../../helpers/utils";
 const TableHeader: React.FC<{ text: string }> = ({ text }) => {
   return (
     <div
-      className="sticky flex flex-row bg-ocf-sites-100
+      className="sticky top-0 z-10 flex flex-row bg-ocf-sites-100
             justify-between"
     >
       <div className="ml-10 w-80">
@@ -81,7 +81,7 @@ const TableData: React.FC<TableDataProps> = ({ rows }) => {
 
   return (
     <>
-      <div className="flex-1 overflow-y-scroll">
+      <div className="flex-1">
         {rows?.sort(sortFn).map((site) => {
           const mostAccurateGeneration = site.actualPV || site.expectedPV;
           return (

diff --git a/apps/nowcasting-app/components/side-layout/index.tsx b/apps/nowcasting-app/components/side-layout/index.tsx
@@ -46,7 +46,7 @@ const SideLayout: FC<SideLayoutProps> = ({
       >
         <div className={`min-h-full max-h-full flex flex-col overflow-y-scroll`}>{children}</div>
       </div>
-      <div className="absolute bottom-12 -right-4 h-10">
+      <div className="absolute bottom-12 -right-4 h-10 z-20">
         <ExpandButton isOpen={isOpen} onClick={() => setIsOpen((o) => !o)} />
       </div>