diff --git a/compendium-frontend/src/App.tsx b/compendium-frontend/src/App.tsx
index edd4cae3573d7003eb3e7ffcf96dc571bc3b4518..32018f6cf8f42c79f7acb11fec0c157c735260f8 100644
--- a/compendium-frontend/src/App.tsx
+++ b/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 />
diff --git a/compendium-frontend/src/components/DataPage.tsx b/compendium-frontend/src/components/DataPage.tsx
index 176ef09f18104876ec4852c1720a1008e4ad99bb..f622cc1beb24209d5299248b859b92d011eb250d 100644
--- a/compendium-frontend/src/components/DataPage.tsx
+++ b/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>
diff --git a/compendium-frontend/src/pages/CompendiumData.tsx b/compendium-frontend/src/pages/CompendiumData.tsx
index f1b531177a45371560efdbbea931c4639a311026..204aa5fa8732af1bda0bdc884bead5cd8831b980 100644
--- a/compendium-frontend/src/pages/CompendiumData.tsx
+++ b/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>
+ </>
);
}
diff --git a/compendium-frontend/src/scss/layout/_components.scss b/compendium-frontend/src/scss/layout/_components.scss
index 1e7c8bfd4cd0301b53ad3e02345f422cfb0e28fe..2ded31a906ce0aed24eddabd126396b2be6d02b6 100644
--- a/compendium-frontend/src/scss/layout/_components.scss
+++ b/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