From efb1ecb7f34721eab52b4f3c3e479de935e3fe49 Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <mail@matthieubessat.fr>
Date: Thu, 11 Jan 2024 08:32:38 +0100
Subject: [PATCH] fix(carousel): z-index issue in navigation pointers

---
 assets/sass/carousel.scss | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/assets/sass/carousel.scss b/assets/sass/carousel.scss
index ac8e62d..aace3d9 100644
--- a/assets/sass/carousel.scss
+++ b/assets/sass/carousel.scss
@@ -105,16 +105,20 @@ $height: 30rem;
     flex: 0 0 100%;
     width: 100%;
     counter-increment: item;
+    z-index: 1; // important: need to have a base set
 }
 
 .slide-content {
     position: absolute;
     width: 100%;
-
+    z-index: 0;
 
     .slide-image {
         padding: 0;
         margin: 0;
+        img {
+            border-radius: 2px;
+        }
         figcaption {
             font-size: .9rem;
             opacity: 0.9;
@@ -140,13 +144,14 @@ $height: 30rem;
 }
 
 .carousel__snapper {
-    position: absolute;
+    position: sticky;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     scroll-snap-align: center;
-    z-index: 1;
+    z-index: 2;
+    pointer-events: none; // let the slide content take the pointer events
 }
 
 // @media (hover: hover) {
@@ -213,7 +218,7 @@ $height: 30rem;
     border-radius: 50%;
     font-size: 0;
     outline: 0;
-    z-index: 4;
+    z-index: 2;
 }
 
 .carousel::before,
@@ -226,11 +231,16 @@ $height: 30rem;
     right: -0.5rem;
 }
 
+.carousel__prev,.carousel__next {
+    // make sure that the square on each side is can be interacted with
+    pointer-events: visible !important;
+}
+
 // the big circle navigation button left and right
 .carousel::before,
 .carousel::after {
     content: '';
-    z-index: 1;
+    z-index: 10;
     background-color: transparent;
     opacity: 0.65;
     background-size: 1.5rem 1.5rem;
@@ -293,6 +303,7 @@ $height: 30rem;
 
 
     .image-container {
+        margin-top: 1.5rem;
         display: flex;
         align-items: center;
     }
@@ -323,6 +334,7 @@ $height: 30rem;
         .image-container {
             display: flex;
             justify-content: center;
+            padding-top: 2rem;
         }
 
         .slide-image {