From cc3a21b2062d217997ffd3e699088cefa06b0db6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Thu, 14 Mar 2024 01:27:47 +0100
Subject: [PATCH] Fix horizontal scroll bug

---
 css/main.css | 6 ++++++
 index.html   | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/css/main.css b/css/main.css
index 5eafe40..00c130a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -25,3 +25,9 @@
 #template {
 	margin-bottom: 10em;
 }
+
+@media (max-width: 768px) {
+  .columns.is-multiline {
+    max-width: 100%;
+  }
+}
diff --git a/index.html b/index.html
index 020b3c6..0ab35f1 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@
     </section>
     <hr>
     <section>
-      <div class="container is-max-widescreen" id="template" hx-boost hx-ext="client-side-templates" style="overflow-x: hidden;">
+      <div class="container is-max-widescreen" id="template" hx-boost hx-ext="client-side-templates">
         <div
           hx-get="http://localhost:1337/api/articles?populate=couverture"
           hx-trigger="load"
@@ -37,7 +37,7 @@
           <p>Chargement...</p>
         </div>
         <script id="articles" type="x-tmpl-mustache">
-          <div class="columns is-multiline p-5">
+          <div class="columns is-multiline p-3">
             {{#data}}
               <div class="column is-one-third">
                 <div class="card">