From 244cbeddac86f72935d2e54a7440acdf43340978 Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Sat, 3 Feb 2024 01:11:21 +0100
Subject: [PATCH] =?UTF-8?q?Avoid=20horizontal=20scroll=20due=20to=20slick?=
 =?UTF-8?q?=E2=80=99s=20right=20margin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I can use overflow for that in most sizes, but on mobile the buttons
are outside the overflow and are not visible, thus have to revert it
and then remove the right margin to avoid the extra space.  Since on
mobile we only show a single slide at a time, the lack of margin is not
noticeable.
---
 web/static/public.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/static/public.css b/web/static/public.css
index e8f20fe..006efc9 100644
--- a/web/static/public.css
+++ b/web/static/public.css
@@ -615,6 +615,7 @@ dl, .nature > div, .outside_activities > div, .campsite_info {
 
 .carousel {
     display: none;
+    overflow: hidden;
 }
 
 .carousel .spiel {
@@ -626,7 +627,7 @@ dl, .nature > div, .outside_activities > div, .campsite_info {
     margin-bottom: 2rem;
 }
 
-.carousel .spiel, .carousel figure, .carousel .slick-track > img {
+.carousel .slick-slide {
     margin-right: 5rem;
     position: relative;
 }
@@ -671,6 +672,9 @@ dl, .nature > div, .outside_activities > div, .campsite_info {
 
 
 @media (max-width: 48rem) {
+    .carousel {
+        overflow: unset;
+    }
 
     .carousel .slick-arrow {
         background: var(--accent);
@@ -681,6 +685,11 @@ dl, .nature > div, .outside_activities > div, .campsite_info {
     .carousel .slick-list {
         padding-top: 2rem;
     }
+
+    .carousel .slick-list,
+    .carousel .slick-slide {
+        margin-right: 0;
+    }
 }
 
 .slick-slider .slick-prev {