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.

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 %}