From d87f5578b7a89ba79e212cc2a1fe26c0aa3f5025 Mon Sep 17 00:00:00 2001
From: Sergio <44024844+sermars@users.noreply.github.com>
Date: Tue, 2 Dec 2025 10:55:53 +0000
Subject: [PATCH] Refactor AI Assessment Catalogue layout for improved
 responsiveness and navigation toggle functionality

---
 docs/assets/css/ai_assess_catalog.css | 12 +++++++----
 docs/data_catalog/index.md            | 31 +++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/docs/assets/css/ai_assess_catalog.css b/docs/assets/css/ai_assess_catalog.css
index 6e6c96bf..51e6cffa 100644
--- a/docs/assets/css/ai_assess_catalog.css
+++ b/docs/assets/css/ai_assess_catalog.css
@@ -4,7 +4,8 @@
 .ai-assessment-table table {
   table-layout: fixed;
   width: 100%;
-  min-width: 1500px;
+  /* Responsive: let container and column min-widths define overflow */
+  min-width: 0;
   border-collapse: collapse;
 }
 
@@ -92,12 +93,15 @@
 
 /* Widen the page content area for this catalogue */
 .catalog-page .md-grid {
-  max-width: 1600px;
-  width: min(96vw, 1600px);
+  /* Fixed side gutters: 24px each, consistent at any viewport width */
+  max-width: none;
+  width: calc(100vw - 500px);
 }
 
 .catalog-page .md-content__inner {
-  margin: 0 0.75rem 2.5rem;
+  /* Keep constant gutters handled by .md-grid; avoid extra padding */
+  margin: 0 auto 2.5rem;
+  padding-inline: 0;
 }
 
 /* Hide the toggle while the sidebar is open */
diff --git a/docs/data_catalog/index.md b/docs/data_catalog/index.md
index b42d24d9..d10fed1e 100644
--- a/docs/data_catalog/index.md
+++ b/docs/data_catalog/index.md
@@ -19,6 +19,37 @@ hide:
 </script>
 
 
+<!-- Floating toggle for showing the left navigation on hover (Data Catalog) -->
+<button class="catalog-nav-toggle" aria-label="Show navigation" title="Show navigation">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d="M3 12c0-.55.45-1 1-1h12.59l-4.3-4.29a1.003 1.003 0 0 1 1.42-1.42l6 6c.39.39.39 1.02 0 1.41l-6 6a1.003 1.003 0 0 1-1.42-1.42L16.59 13H4c-.55 0-1-.45-1-1Z"/>
+        </svg>
+ </button>
+
+<script>
+// Page-scoped nav hover behaviour for Data Catalog
+document.addEventListener('DOMContentLoaded', function () {
+    const body = document.body;
+    body.classList.add('catalog-page');
+
+    const primary = document.querySelector('.md-sidebar--primary');
+    const toggle = document.querySelector('.catalog-nav-toggle');
+    if (!primary || !toggle) return;
+
+    let inside = false;
+
+    const open = () => body.classList.add('catalog-nav-open');
+    const close = () => { if (!inside) body.classList.remove('catalog-nav-open'); };
+
+    toggle.addEventListener('mouseenter', () => { inside = true; open(); });
+    toggle.addEventListener('mouseleave', () => { inside = false; setTimeout(close, 120); });
+    toggle.addEventListener('click', () => { body.classList.toggle('catalog-nav-open'); });
+
+    primary.addEventListener('mouseenter', () => { inside = true; open(); });
+    primary.addEventListener('mouseleave', () => { inside = false; setTimeout(close, 150); });
+});
+</script>
+
 <div class="catalog-header" markdown>
 <div markdown>
 The data catalog is a centralized hub to keep track of available datasets. It is regularly updated to include new data as it becomes available in any TEF node. If you want access to any dataset, please click "Contact" to reach the owners.