Merge pull request #89 from CitComAI-Hub/develop

Refactor catalogs width tables

Author: joancipria

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 */

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.