From dfb177eb992f4f79a2c1165429153d8afea2e04d Mon Sep 17 00:00:00 2001
From: Nonimart <martinon.toinou@protonmail.com>
Date: Tue, 21 Oct 2025 15:10:34 +0200
Subject: [PATCH] FEATURE handling mobile scrollbar behaviour

---
 .../css/components/article-revues-toolbar.css | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/resources/css/components/article-revues-toolbar.css b/resources/css/components/article-revues-toolbar.css
index c2461f5..bb02025 100644
--- a/resources/css/components/article-revues-toolbar.css
+++ b/resources/css/components/article-revues-toolbar.css
@@ -4,8 +4,42 @@
 
   .tablist {
     @apply flex items-center overflow-x-scroll lg:overflow-x-visible gap-4 md:gap-8 lg:gap-12 border-b border-primary;
+    position: relative;
+
+    @media screen and (max-width: 1024px) {
+      border-bottom: none;
+      padding-bottom: 1em;
+      /* Ligne de 1px à 5px du bord du bas */
+      background: linear-gradient(
+          to right,
+          var(--wp--preset--color--primary, #136f63),
+          var(--wp--preset--color--primary, #136f63)
+        )
+        bottom 2em center / 100% 1px no-repeat;
+
+      &::-webkit-scrollbar {
+        width: 2em;
+        height: 1em;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: #cef9ee;
+        border-radius: 100vw;
+        margin-block: 0.5em;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        @apply bg-primary;
+        border-radius: 100vw;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background: hsl(120 100% 10% / 1);
+      }
+    }
+
     button {
-      @apply text-base md:text-lg  lg:text-lg  mt-8  nunito pb-4 flex flex-col lg:flex-row  items-center gap-2 lg:gap-4 text-left;
+      @apply text-base md:text-lg  lg:text-lg  mt-8  nunito pb-4 flex flex-col lg:flex-row  items-center gap-2 lg:gap-4 text-left shrink-0;
       grid-template-columns: auto 1fr;
       /* white-space: normal;
       word-wrap: break-word; */