Stabilize layout across modern browsers

application_neo4j/static/css/style.css

@@ -2,13 +2,79 @@
  *  STYLE GLOBAL & GRAPHIQUE SIGMA
  * =================================================================== */
 
+/* Explicit sizing and minimum widths avoid engine-specific flexbox
+ * expansion differences (notably between Blink and Gecko). */
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  min-width: 320px;
+}
+
+.legacy-browser-warning {
+  display: none;
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #664d03;
+  background: #fff3cd;
+  border-bottom: 1px solid #ffecb5;
+  font-weight: 600;
+  text-align: center;
+}
+
+img,
+svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.row > *,
+.card,
+.card-body,
+.flex-grow-1 {
+  min-width: 0;
+}
+
+.navbar .container {
+  column-gap: 1rem;
+  row-gap: 0.75rem;
+}
+
+.navbar-brand {
+  min-width: 0;
+  max-width: 100%;
+  white-space: normal;
+}
+
+.navbar-brand small,
+#suggestions-list li {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.navbar-actions {
+  min-width: 0;
+  margin-left: auto;
+}
+
  #sigma-container {
   width: 100%;
   height: 600px; /* Un peu plus de hauteur pour un meilleur confort */
-  border: 1px solid var(--bs-border-color); /* Variable Bootstrap */
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #dee2e6;
+  border: 1px solid var(--bs-border-color, #dee2e6); /* Variable Bootstrap */
   margin-top: 1rem;
-  border-radius: var(--bs-border-radius); /* Variable Bootstrap */
-  background-color: var(--bs-light-bg-subtle); /* Fond légèrement teinté */
+  border-radius: 0.375rem;
+  border-radius: var(--bs-border-radius, 0.375rem); /* Variable Bootstrap */
+  background-color: #f8f9fa;
+  background-color: var(--bs-light-bg-subtle, #f8f9fa); /* Fond légèrement teinté */
+}
+
+#floating-legend {
+  max-width: calc(100% - 1rem);
 }
 
 /* ===================================================================
@@ -32,35 +98,62 @@
 /* ===================================================================
  *  STYLE DES TABLES (DATATABLES)
  * =================================================================== */
-/* Permet au texte de revenir à la ligne naturellement */
+/* A single, deterministic wrapping policy replaces the previous contradictory
+ * normal/nowrap declarations. */
 #descendance-table th, #descendance-table td,
-#ascendance-table th, #ascendance-table td {
-    white-space: normal; /* <-- La correction clé ! */
-    word-wrap: break-word; /* Force le retour à la ligne des mots longs */
-    vertical-align: middle; /* Garde le centrage vertical */
+#ascendance-table th, #ascendance-table td,
+#train-table th, #train-table td,
+#graph-models-table th, #graph-models-table td {
+    white-space: nowrap;
+    vertical-align: middle;
 }
 
-/* On peut donner une largeur minimale aux colonnes pour garder une bonne structure */
-#descendance-table th, #ascendance-table th {
-    min-width: 120px; /* Ajustez cette valeur selon vos besoins */
+#descendance-table th,
+#ascendance-table th,
+#train-table th {
+    min-width: 120px;
 }
 
-/* Cas spécifique pour les colonnes potentiellement longues comme le nom du modèle */
-#descendance-table th:first-child, #ascendance-table th:first-child {
+#descendance-table th:first-child, #descendance-table td:first-child,
+#ascendance-table th:first-child, #ascendance-table td:first-child,
+#train-table th:first-child, #train-table td:first-child,
+#graph-models-table th:first-child, #graph-models-table td:first-child {
     min-width: 200px;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
 }
 
-/* Empêche le texte de se couper dans les cellules, force le défilement horizontal */
-#descendance-table th, #descendance-table td,
-#ascendance-table th, #ascendance-table td {
-    white-space: nowrap;
-    vertical-align: middle; /* Centrage vertical pour un look plus propre */
+.table-responsive,
+div.dataTables_wrapper,
+div.dataTables_wrapper div.dataTables_scroll {
+  width: 100%;
+  max-width: 100%;
+}
+
+.table-responsive,
+div.dataTables_wrapper div.dataTables_scrollBody {
+  overflow-x: auto !important;
+  -webkit-overflow-scrolling: touch;
+}
+
+div.dataTables_wrapper div.dataTables_scrollHeadInner {
+  min-width: 100%;
+}
+
+div.dataTables_wrapper table.dataTable {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  table-layout: auto;
 }
 
 /* Personnalisation de l'input de recherche de DataTables pour qu'il ressemble à un champ Bootstrap */
 div.dataTables_wrapper div.dataTables_filter input {
-  border: 1px solid var(--bs-border-color);
-  border-radius: var(--bs-border-radius);
+  max-width: 100%;
+  border: 1px solid #dee2e6;
+  border: 1px solid var(--bs-border-color, #dee2e6);
+  border-radius: 0.375rem;
+  border-radius: var(--bs-border-radius, 0.375rem);
   padding: 0.375rem 0.75rem;
   margin-left: 0.5em;
 }
@@ -100,8 +193,12 @@ div.dataTables_wrapper .table thead th.sorting_desc::after {
   /* Ce style est pour si vous utilisez une <ul> simple.
      Si vous avez bien une <ul class="list-group">, vous pouvez supprimer ce bloc. */
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-  border-radius: var(--bs-border-radius);
-  background-color: var(--bs-light);
+  max-width: 100%;
+  overflow-x: hidden;
+  border-radius: 0.375rem;
+  border-radius: var(--bs-border-radius, 0.375rem);
+  background-color: #f8f9fa;
+  background-color: var(--bs-light, #f8f9fa);
 }
 #suggestions-list li:hover {
   background-color:  #94bfeb; ;
@@ -198,11 +295,22 @@ div.dataTables_wrapper .table thead th.sorting_desc::after {
 }
 
 /* Change la couleur de fond des cases à cocher lorsqu'elles sont cochées */
-.btn {
+.btn-primary {
   background-color: #6a11cb; 
   border-color:#6a11cb;    
 }
 
+.btn-outline-primary {
+  color: #6a11cb;
+  border-color: #6a11cb;
+}
+
+.btn-outline-primary:hover {
+  color: #fff;
+  background-color: #6a11cb;
+  border-color: #6a11cb;
+}
+
 .stretched-link{
 color: #6a11cb; 
 }
@@ -268,4 +376,31 @@ main {
 .btn-modern:hover {
   background: linear-gradient(135deg, #5a0fbf, #1d63e1);
   transform: translateY(-3px);
-}
+}
+
+@media (max-width: 575.98px) {
+  .navbar-brand,
+  .navbar-actions {
+    flex: 1 1 100%;
+    margin-right: 0;
+  }
+
+  .navbar-actions {
+    justify-content: flex-start !important;
+  }
+
+  #sigma-container {
+    height: 70vh;
+    min-height: 420px;
+  }
+
+  div.dataTables_wrapper div.dataTables_filter label {
+    display: block;
+    width: 100%;
+  }
+
+  div.dataTables_wrapper div.dataTables_filter input {
+    width: 100%;
+    margin: 0.375rem 0 0;
+  }
+}

application_neo4j/static/js/browser_compatibility.js

@@ -0,0 +1,13 @@
+(function () {
+  "use strict";
+
+  // `document.documentMode` is exposed by Internet Explorer only. The rest of
+  // the application deliberately targets maintained browsers supported by
+  // Bootstrap 5.
+  if (document.documentMode) {
+    var warning = document.getElementById("legacy-browser-warning");
+    if (warning) {
+      warning.style.display = "block";
+    }
+  }
+}());

application_neo4j/static/js/script.js

@@ -193,7 +193,8 @@ document.addEventListener("DOMContentLoaded", () => {
             const common_dt_options = {
                 "language": { "url": datatablesLangUrl },
                 "pageLength": 10,
-                "responsive": true,"scrollX": true , "scrollY":true,
+                "responsive": true,
+                "scrollX": true,
                 // Afficher en premier les modèles les plus téléchargés.
                 "order": [[2, "desc"]],
                 "columnDefs": [

application_neo4j/static/js/script_dataset.js

@@ -209,7 +209,8 @@ document.addEventListener("DOMContentLoaded", () => {
             const common_dt_options = {
                 "language": { "url": datatablesLangUrl },
                 "pageLength": 10,
-                "responsive": true,"scrollX": true , "scrollY":true,
+                "responsive": true,
+                "scrollX": true,
                 "columnDefs": [
                 {
                     // Appliquer notre plugin 'numeric-string' aux colonnes cibles

application_neo4j/templates/expert.html

@@ -18,13 +18,15 @@
 </head>
 
 <body class="d-flex flex-column min-vh-100">
+    <div id="legacy-browser-warning" class="legacy-browser-warning" role="alert">{{ t('site.legacy_browser_warning') }}</div>
+    <script src="{{ url_for('static', filename='js/browser_compatibility.js') }}"></script>
     <header class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
     <div class="container">
       <a class="navbar-brand" href="{{ url_for('home', lang=current_lang) }}">
         <span class="fw-bold">{{ t('site.nav_brand_model_expert') }}</span>
         <small class="d-block text-muted">{{ t('site.nav_subtitle') }}</small>
       </a>
-      <div class="d-flex align-items-center justify-content-end flex-wrap gap-2">
+      <div class="navbar-actions d-flex align-items-center justify-content-end flex-wrap gap-2">
         <a href="{{ url_for('home', lang=current_lang) }}" class="btn btn-sm btn-dark me-3">
           <i class="bi bi-house-door-fill me-1" aria-hidden="true"></i>{{ t('site.home_button') }}
         </a>

application_neo4j/templates/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ t('site.title_home') }}</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 
 <style>/* Style simple pour la page d'accueil */
  body {
@@ -116,11 +116,30 @@
       background: #3498db;
       color: #fff;
     }
+
+    @media (max-width: 575.98px) {
+      .lang-switch {
+        position: static;
+        justify-content: flex-end;
+        padding: 12px 15px 0;
+      }
+
+      .welcome-container {
+        padding-top: 24px;
+      }
+
+      .content-card {
+        padding: 22px;
+        text-align: left;
+      }
+    }
     
     </style>
     </head>
 
 <body>
+    <div id="legacy-browser-warning" class="legacy-browser-warning" role="alert">{{ t('site.legacy_browser_warning') }}</div>
+    <script src="{{ url_for('static', filename='js/browser_compatibility.js') }}"></script>
     <!-- Language selector -->
     <div class="lang-switch">
       <a href="{{ url_for('set_language_route', lang='fr') }}" class="{{ 'active' if current_lang == 'fr' else '' }}">{{ t('lang.fr') }}</a>

application_neo4j/templates/infos.html

@@ -7,6 +7,7 @@
     <style>
         body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
         body { display: flex; flex-direction: column; font-family: sans-serif; }
+        .legacy-browser-warning { display: none; padding: 0.75rem 1rem; color: #664d03; background: #fff3cd; border-bottom: 1px solid #ffecb5; font-weight: 600; text-align: center; }
         .toolbar {
             display: flex;
             align-items: center;
@@ -24,11 +25,13 @@
             font-weight: 600;
         }
         .home-button:hover { color: #fff; background: #424649; }
-        .pdf-container { width: 100%; flex: 1; min-height: 0; }
-        .pdf-container iframe { border: none; width: 100%; height: 100%; }
+        .pdf-container { width: 100%; height: calc(100% - 52px); flex: 1; min-height: 0; }
+        .pdf-container iframe { display: block; border: none; width: 100%; height: 100%; }
     </style>
 </head>
 <body>
+    <div id="legacy-browser-warning" class="legacy-browser-warning" role="alert">{{ t('site.legacy_browser_warning') }}</div>
+    <script src="{{ url_for('static', filename='js/browser_compatibility.js') }}"></script>
     <nav class="toolbar" aria-label="{{ t('site.home_button') }}">
         <a class="home-button" href="{{ url_for('home', lang=current_lang) }}">⌂ {{ t('site.home_button') }}</a>
     </nav>

application_neo4j/templates/search.html

@@ -33,13 +33,15 @@
 </head>
 
 <body class="d-flex flex-column min-vh-100">
+    <div id="legacy-browser-warning" class="legacy-browser-warning" role="alert">{{ t('site.legacy_browser_warning') }}</div>
+    <script src="{{ url_for('static', filename='js/browser_compatibility.js') }}"></script>
     <header class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
     <div class="container">
       <a class="navbar-brand" href="{{ url_for('home', lang=current_lang) }}">
         <span class="fw-bold">{{ t('site.nav_brand') }}</span>
         <small class="d-block text-muted">{{ t('site.nav_subtitle_full') }}</small>
       </a>
-      <div class="d-flex align-items-center justify-content-end flex-wrap gap-2">
+      <div class="navbar-actions d-flex align-items-center justify-content-end flex-wrap gap-2">
         <a href="{{ url_for('home', lang=current_lang) }}" class="btn btn-sm btn-dark me-3">
           <i class="bi bi-house-door-fill me-1" aria-hidden="true"></i>{{ t('site.home_button') }}
         </a>

application_neo4j/templates/search_dataset.html

@@ -33,13 +33,15 @@
 </head>
 
 <body class="d-flex flex-column min-vh-100">
+    <div id="legacy-browser-warning" class="legacy-browser-warning" role="alert">{{ t('site.legacy_browser_warning') }}</div>
+    <script src="{{ url_for('static', filename='js/browser_compatibility.js') }}"></script>
     <header class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
     <div class="container">
       <a class="navbar-brand" href="{{ url_for('home', lang=current_lang) }}">
         <span class="fw-bold">{{ t('site.nav_brand') }}</span>
         <small class="d-block text-muted">{{ t('site.nav_subtitle') }}</small>
       </a>
-      <div class="d-flex align-items-center justify-content-end flex-wrap gap-2">
+      <div class="navbar-actions d-flex align-items-center justify-content-end flex-wrap gap-2">
         <a href="{{ url_for('home', lang=current_lang) }}" class="btn btn-sm btn-dark me-3">
           <i class="bi bi-house-door-fill me-1" aria-hidden="true"></i>{{ t('site.home_button') }}
         </a>

application_neo4j/translations.py

@@ -46,6 +46,7 @@ TRANSLATIONS = {
         "site.nav_subtitle": "Exploration des relations entre modèles et datasets",
         "site.nav_subtitle_full": "Exploration des relations entre modèles et datasets (base de données actualisée le {date})",
         "site.home_button": "Accueil",
+        "site.legacy_browser_warning": "Ce navigateur n’est plus pris en charge. Pour un affichage stable, utilisez une version récente de Firefox, Chrome, Edge ou Safari.",
         "site.footer": "Application de recherche et visualisation des relations entre modèles et jeux de données publiés sur la plateforme HuggingFace. © 2025",
         "site.footer_expert": "Application de recherche et visualisation... © 2025",
 
@@ -284,6 +285,7 @@ TRANSLATIONS = {
         "site.nav_subtitle": "Exploration of relations between models and datasets",
         "site.nav_subtitle_full": "Exploration of relations between models and datasets (database updated on {date})",
         "site.home_button": "Home",
+        "site.legacy_browser_warning": "This browser is no longer supported. For a stable display, use a recent version of Firefox, Chrome, Edge or Safari.",
         "site.footer": "Application for searching and visualizing relations between models and datasets published on the HuggingFace platform. © 2025",
         "site.footer_expert": "Application for searching and visualizing... © 2025",