Add JS fix to scrolling with more than one fixed header

compendium-frontend/src/pages/Network/Automation.tsx

-import React, { useContext } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import { Table } from "react-bootstrap";
 
 import { NetworkAutomation } from "compendium/Schema";
@@ -15,6 +15,7 @@ import titles from "compendium/titles";
 function AutomationPage(): React.ReactElement {
     const { filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
     const { data: pertTeamData, years, nrens } = useData<NetworkAutomation>('/api/network-automation', setFilterSelection);
+    const headerRef = useRef<HTMLTableRowElement>(null);
 
     const selectedData = (pertTeamData).filter(data =>
         filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
@@ -31,6 +32,17 @@ function AutomationPage(): React.ReactElement {
 
     const showYears = [...filterSelection.selectedYears.filter(year => years.has(year))].sort();
 
+    useEffect(() => {
+        const ref = headerRef.current;
+        if (ref) {
+            const height = Math.round(ref.getBoundingClientRect().height) - 2; // -2 to account for things being visible through the border
+            const nextRow = ref.nextElementSibling as HTMLTableRowElement;
+            if (nextRow) {
+                nextRow.style.setProperty('--header-height', `${height}px`);
+            };
+        }
+    }, [headerRef]);
+
     return (
         <DataPage title={titles["network-automation"]}
             description="The table below shows which NRENs have, or plan to, automate their 
@@ -53,7 +65,7 @@ function AutomationPage(): React.ReactElement {
                         <col span={2} style={{ width: "12%" }} />
                     </colgroup>
                     <thead>
-                        <tr>
+                        <tr ref={headerRef}>
                             <th></th>
                             <th colSpan={2}>Device Provisioning</th>
                             <th colSpan={2}>Data Collection</th>

compendium-frontend/src/pages/Network/NetworkFunctionVirtualisation.tsx

-import React, { useContext } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import { Table } from "react-bootstrap";
 
 import { NetworkFunctionVirtualisation } from "compendium/Schema";
@@ -15,6 +15,7 @@ import titles from "compendium/titles";
 function NetworkFunctionVirtualisationPage(): React.ReactElement {
     const { filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
     const { data, years, nrens } = useData<NetworkFunctionVirtualisation>('/api/nfv', setFilterSelection);
+    const headerRef = useRef<HTMLTableRowElement>(null);
 
     const selectedData = data.filter(data =>
         filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
@@ -31,6 +32,19 @@ function NetworkFunctionVirtualisationPage(): React.ReactElement {
 
     const showYears = [...filterSelection.selectedYears.filter(year => years.has(year))].sort();
 
+    useEffect(() => {
+            const ref = headerRef.current;
+            if (ref) {
+                const height = Math.round(ref.getBoundingClientRect().height) - 2; // -2 to account for things being visible through the border
+                const nextRow = ref.nextElementSibling as HTMLTableRowElement;
+                if (nextRow) {
+                    console.log(nextRow);
+                    console.log(height);
+                    nextRow.style.setProperty('--header-height', `${height}px`);
+                };
+            }
+        }, [headerRef]);
+
     return (
         <DataPage title={titles.nfv}
             description="The table below shows the kinds of Network Function Virtualisation (NFV) used by NRENs."
@@ -47,7 +61,7 @@ function NetworkFunctionVirtualisationPage(): React.ReactElement {
                         <col span={2} style={{ width: "16%" }} />
                     </colgroup>
                     <thead>
-                        <tr>
+                        <tr ref={headerRef}>
                             <th></th>
                             <th colSpan={2}>Routers/switches</th>
                             <th colSpan={2}>Firewalls</th>

compendium-frontend/src/scss/layout/_components.scss

@@ -324,9 +324,9 @@ $service-check-colors: (
   z-index: 1;
 }
 
-.charging-struct-table thead tr:not(:first-child) th {
+.charging-struct-table thead tr:nth-child(2) th {
   position: sticky;
-  top: 50px;
+  top: var(--header-height, 50px);
   background-color: white;
   z-index: 1;
 }