From 26cf245ffe394894ec8b0a69910bc223537b18cf Mon Sep 17 00:00:00 2001
From: william <you@example.com>
Date: Mon, 24 Aug 2026 11:33:29 +0200
Subject: [PATCH] Truncate long cells in the data table and add a row-detail
 popup

Cells now clip with an ellipsis instead of wrapping and inflating row height. A new eye button before the pencil opens a popup showing every field of that row in full, label above value, for comfortable reading.
---
 static/style.css         | 25 ++++++++++++++++-
 templates/data_list.html | 58 ++++++++++++++++++++++++++++++++++------
 2 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/static/style.css b/static/style.css
index 7aed9c80..73b67af4 100644
--- a/static/style.css
+++ b/static/style.css
@@ -59,9 +59,32 @@ button.danger{ color:var(--danger); border-color:rgba(226,104,95,.4); }
 .fieldRowCard{ margin-bottom:10px; }
 .relationTarget{ margin-top:6px; }
 
+.dataTableWrap{ overflow-x:auto; max-width:100%; }
 .dataTable{ width:100%; border-collapse:collapse; font-size:12.5px; }
 .dataTable th, .dataTable td{ border:1px solid var(--border); padding:6px 8px; text-align:left; }
-.dataTable th{ background:var(--panel2); color:var(--text-dim); }
+.dataTable th{ background:var(--panel2); color:var(--text-dim); white-space:nowrap; }
+.dataTable td{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+
+/* ---------- Détail d'une entrée (bouton 👁️) ---------- */
+/* Popup plein écran assombri, pour lire une ligne dont les colonnes sont
+   tronquées dans le tableau (voir .dataTable td ci-dessus) sans avoir à
+   ouvrir le formulaire de modification. */
+.rowDetailModal{
+  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
+  align-items:center; justify-content:center; z-index:100; padding:20px;
+}
+.rowDetailModal.open{ display:flex; }
+.rowDetailCard{
+  background:var(--panel); border:1px solid var(--border); border-radius:10px;
+  max-width:640px; width:100%; max-height:80vh; display:flex; flex-direction:column;
+}
+.rowDetailHeader{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); flex:0 0 auto; }
+.rowDetailHeader h3{ margin:0; color:var(--text); font-size:15px; }
+.rowDetailBody{ padding:6px 16px 16px; overflow-y:auto; }
+.rowDetailField{ padding:10px 0; border-bottom:1px solid var(--border); }
+.rowDetailField:last-child{ border-bottom:none; }
+.rowDetailLabel{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
+.rowDetailValue{ font-size:13.5px; white-space:pre-wrap; word-break:break-word; }
 
 .content-wide{ max-width:1080px; }
 .twoCol{ display:flex; gap:24px; align-items:flex-start; margin-top:10px; }
diff --git a/templates/data_list.html b/templates/data_list.html
index 6cb75b72..48d4c3da 100644
--- a/templates/data_list.html
+++ b/templates/data_list.html
@@ -30,6 +30,16 @@
 
 <h2>Données enregistrées</h2>
 {% if rows %}
+{% macro row_field_display(f, r) %}
+{%- if f.type == 'relation' -%}
+{{ relation_labels.get(f.id, {}).get(r[(f.name|colname) ~ '_id'], '—') }}
+{%- elif f.type == 'booleen' -%}
+{{ 'Oui' if r[f.name|colname] else 'Non' }}
+{%- else -%}
+{{ r[f.name|colname] }}
+{%- endif -%}
+{% endmacro %}
+<div class="dataTableWrap">
 <table class="dataTable">
   <thead>
     <tr>
@@ -43,17 +53,11 @@
     <tr>
       <td>{{ r.id }}</td>
       {% for f in definition.fields %}
-      {% if f.type == 'relation' %}
-      {% set rel_id = r[(f.name|colname) ~ '_id'] %}
-      <td>{{ relation_labels.get(f.id, {}).get(rel_id, '—') }}</td>
-      {% elif f.type == 'booleen' %}
-      <td>{{ 'Oui' if r[f.name|colname] else 'Non' }}</td>
-      {% else %}
-      <td>{{ r[f.name|colname] }}</td>
-      {% endif %}
+      <td>{{ row_field_display(f, r) }}</td>
       {% endfor %}
       <td>
         <div class="rowActions">
+          <button type="button" class="smallBtn" title="Voir cette entrée en détail" onclick="openRowDetail({{ r.id }})">👁️</button>
           <a class="smallBtn" href="{{ url_for('data_edit', slug=game.slug, definition_id=definition.id, row_id=r.id) }}">✏️</a>
           <form method="post" action="{{ url_for('data_delete', slug=game.slug, definition_id=definition.id, row_id=r.id) }}"
                 onsubmit="return confirm('Supprimer définitivement l\'entrée #{{ r.id }} ?');">
@@ -65,7 +69,45 @@
     {% endfor %}
   </tbody>
 </table>
+</div>
+
+{% for r in rows %}
+<div class="rowDetailModal" id="rowDetail{{ r.id }}" onclick="if(event.target===this) closeRowDetail({{ r.id }});">
+  <div class="rowDetailCard">
+    <div class="rowDetailHeader">
+      <h3>Entrée #{{ r.id }}</h3>
+      <button type="button" class="smallBtn" title="Fermer" onclick="closeRowDetail({{ r.id }})">✕</button>
+    </div>
+    <div class="rowDetailBody">
+      {% for f in definition.fields %}
+      <div class="rowDetailField">
+        <div class="rowDetailLabel">{{ f.name }}</div>
+        <div class="rowDetailValue">{{ row_field_display(f, r) }}</div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+{% endfor %}
 {% else %}
 <p class="hint">Aucune donnée enregistrée pour l'instant.</p>
 {% endif %}
+
+<script>
+function openRowDetail(id) {
+  var modal = document.getElementById('rowDetail' + id);
+  if (modal) modal.classList.add('open');
+}
+function closeRowDetail(id) {
+  var modal = document.getElementById('rowDetail' + id);
+  if (modal) modal.classList.remove('open');
+}
+if (!window.__forgeRowDetailEscBound) {
+  window.__forgeRowDetailEscBound = true;
+  document.addEventListener('keydown', function (e) {
+    if (e.key !== 'Escape') return;
+    document.querySelectorAll('.rowDetailModal.open').forEach(function (m) { m.classList.remove('open'); });
+  });
+}
+</script>
 {% endblock %}