From f6d3c05a89332d24da196bccab466af224cd368e Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Fri, 10 Apr 2026 08:33:04 +0200
Subject: Fix tables on mobile

Display block was breaking small tables.
Added a hook to keep a block for overflow
---
 assets/css/main.css                        | 12 ++++++++----
 layouts/_default/_markup/render-table.html | 22 ++++++++++++++++++++++
 2 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 layouts/_default/_markup/render-table.html

diff --git a/assets/css/main.css b/assets/css/main.css
index cbd7d77..d34ea94 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -177,15 +177,19 @@ header h1 {
 }
 
 /* Tables */
+.table-wrapper {
+  display: block;
+  overflow-x: auto;
+  margin-bottom: 1.25rem;
+}
+
 table {
   width: 100%;
   border: 1px solid var(--color-border);
   border-radius: 0.375rem;
   border-collapse: separate;
   border-spacing: 0;
-  margin-bottom: 1.25rem;
-  display: block;
-  overflow-x: auto;
+  display: table;
 }
 
 thead th {
@@ -209,7 +213,7 @@ tbody td:last-child { border-right: 0; }
 tbody tr:last-child td { border-bottom: 0; }
 
 @media (min-width: 768px) {
-  table { display: table; overflow-x: visible; }
+  table { width: auto; min-width: 500px; }
   thead th, tbody td { white-space: normal; }
 }
 
diff --git a/layouts/_default/_markup/render-table.html b/layouts/_default/_markup/render-table.html
new file mode 100644
index 0000000..4f057cc
--- /dev/null
+++ b/layouts/_default/_markup/render-table.html
@@ -0,0 +1,22 @@
+<div class="table-wrapper">
+  <table>
+    <thead>
+      {{ range .THead }}
+        <tr>
+          {{ range . }}
+            <th>{{ .Text }}</th>
+          {{ end }}
+        </tr>
+      {{ end }}
+    </thead>
+    <tbody>
+      {{ range .TBody }}
+        <tr>
+          {{ range . }}
+            <td>{{ .Text }}</td>
+          {{ end }}
+        </tr>
+      {{ end }}
+    </tbody>
+  </table>
+</div>
-- 
cgit v1.3