use main on all pages to allow footer following the bottom of the page consistently

use common margins

compendium-frontend/src/App.tsx

@@ -83,7 +83,9 @@ const GlobalLayout = () => {
     <>
       <Providers>
         <ExternalPageNavBar />
-        {hasOutlet ? <Outlet /> : <Landing />}
+        <main className="grow">
+          {hasOutlet ? <Outlet /> : <Landing />}
+        </main>
         <PrivacyModal />
       </Providers>
       <GeantFooter />

compendium-frontend/src/components/DataPage.tsx

@@ -55,7 +55,7 @@ function DataPage({ title, description, filter, children, category, data, filena
                 <span>You are viewing a preview of the website which includes pre-published survey data. <a href={locationWithoutPreview}>Click here</a> to deactivate preview mode.</span>
             </Row>}
             <SectionNavigation activeCategory={category} />
-            <Container className="grow">
+            <Container className="mb-5 grow">
                 <Row>
                     <h3 className="m-1">{title}</h3>
                 </Row>

compendium-frontend/src/pages/CompendiumData.tsx

@@ -11,7 +11,6 @@ import useMatomo from "../matomo/UseMatomo";
 function CompendiumData(): ReactElement {
     usePreview();
 
-
     const { trackPageView } = useMatomo()
 
     React.useEffect(() => {
@@ -21,7 +20,7 @@ function CompendiumData(): ReactElement {
     }, [trackPageView])
 
     return (
-        <main className="grow">
+        <>
             <PageHeader type={'data'} />
             <Banner type={'data'}>
                 <p className="wordwrap">
@@ -32,8 +31,9 @@ function CompendiumData(): ReactElement {
                 </p>
             </Banner>
 
-            <Container className="pt-5">
-                <CollapsibleBox title={Sections.Organisation}>
+            <Container className="mt-5 mb-5">
+                <Row>
+                    <CollapsibleBox title={Sections.Organisation}>
                         <h6 className="section-title">Budget, Income and Billing</h6>
                         <Link to="/budget" className="link-text-underline">
                             <span>Budget of NRENs per Year</span>
@@ -67,9 +67,9 @@ function CompendiumData(): ReactElement {
                         <Link to="/ec-projects" className="link-text-underline">
                             <span>NREN Involvement in European Commission Projects</span>
                         </Link>
-                </CollapsibleBox>
+                    </CollapsibleBox>
 
-                <CollapsibleBox title={Sections.Policy} startCollapsed>
+                    <CollapsibleBox title={Sections.Policy} startCollapsed>
                         <Link to="/policy" className="link-text-underline">
                             <span>NREN Policies</span>
                         </Link>
@@ -104,9 +104,9 @@ function CompendiumData(): ReactElement {
                         <Link to="/service-management-framework" className="link-text-underline">
                             <span>NRENs Operating a Formal Service Management Framework</span>
                         </Link>
-                </CollapsibleBox>
+                    </CollapsibleBox>
 
-                <CollapsibleBox title={Sections.ConnectedUsers} startCollapsed>
+                    <CollapsibleBox title={Sections.ConnectedUsers} startCollapsed>
                         <h6 className="section-title">Connected Users</h6>
                         <Link to="/institutions-urls" className="link-text-underline">
                             <span>Webpages Listing Institutions and Organisations Connected to NREN Networks</span>
@@ -138,8 +138,8 @@ function CompendiumData(): ReactElement {
                         <Link to="/commercial-connectivity" className="link-text-underline">
                             <span>Commercial Connectivity</span>
                         </Link>
-                </CollapsibleBox>
-                <CollapsibleBox title={Sections.Network} startCollapsed>
+                    </CollapsibleBox>
+                    <CollapsibleBox title={Sections.Network} startCollapsed>
                         <h6 className="section-title" >Connectivity</h6>
                         <Link to="/traffic-volume" className="link-text-underline">
                             <span>NREN Traffic - NREN Customers & External Networks</span>
@@ -221,8 +221,8 @@ function CompendiumData(): ReactElement {
                         <Link to="/nfv" className="link-text-underline">
                             <span>Kinds of Network Function Virtualisation used by NRENs</span>
                         </Link>
-                </CollapsibleBox>
-                <CollapsibleBox title={Sections.Services} startCollapsed>
+                    </CollapsibleBox>
+                    <CollapsibleBox title={Sections.Services} startCollapsed>
                         <Link to="/network-services" className="link-text-underline">
                             <span>Network services</span>
                         </Link>
@@ -247,9 +247,10 @@ function CompendiumData(): ReactElement {
                         <Link to="/professional-services" className="link-text-underline">
                             <span>Professional services</span>
                         </Link>
-                </CollapsibleBox>
+                    </CollapsibleBox>
+                </Row>
             </Container>
-        </main>
+        </>
     );
 }
 

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

@@ -52,7 +52,6 @@ $year-colors: (
   display: flex;
   flex-direction: column;
   flex: 1;
-  padding-bottom: 4%;
 }
 
 .grey-container {
@@ -124,6 +123,7 @@ $year-colors: (
   opacity: 0;
   max-height: 0;
   visibility: hidden;
+  overflow: hidden;
 }
 
 .collapsible-column {
@@ -614,4 +614,28 @@ $funding-source-colors: (
 
 .bold-text {
   font-weight: bold;
+}
+
+.user-management-table {
+  width: 100%;
+  table-layout: fixed;
+  max-height: max(50vh, 30rem);
+}
+
+@media (max-width: 1920px) {
+  .user-management-table {
+    max-width: 100vw;
+  }
+}
+
+.user-management-table>* th,
+.user-management-table>* td {
+  word-wrap: break-word;
+}
+
+.user-management-table thead th {
+  position: sticky;
+  top: -.1rem;
+  background-color: white;
+  z-index: 1;
 }
\ No newline at end of file