From 1737b1c2b2736a3f3b47c08165b9ab1972aaecbf Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Sun, 2 Feb 2025 19:59:26 -0700
Subject: [PATCH] add space before first discover card

---
 src/pages/discover/discover.css        |  8 ++++----
 src/pages/discover/discoverContent.tsx | 12 +++++++++---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/pages/discover/discover.css b/src/pages/discover/discover.css
index 80cdc534..901cc330 100644
--- a/src/pages/discover/discover.css
+++ b/src/pages/discover/discover.css
@@ -14,13 +14,13 @@
     rgba(0, 0, 0, 1) calc(100% - 80px), 
     rgba(0, 0, 0, 0) 100%
   );
+  z-index: 1;
 }
 
 @media (max-width: 768px) {
-  .carousel-container::before,
-  .carousel-container::after {
-    /* width: 40px; // hidden instead because it might look like there is nothing to scroll*/
-    display: none;
+  .carousel-container {
+    mask-image: none;
+    -webkit-mask-image: none;
   }
 }
 
diff --git a/src/pages/discover/discoverContent.tsx b/src/pages/discover/discoverContent.tsx
index 07a716dc..545dd129 100644
--- a/src/pages/discover/discoverContent.tsx
+++ b/src/pages/discover/discoverContent.tsx
@@ -643,7 +643,7 @@ export function DiscoverContent() {
               );
             })
             .slice(0, 25)
-            .map((media) => (
+            .map((media, index, array) => (
               <a
                 key={media.id}
                 onClick={() =>
@@ -651,8 +651,14 @@ export function DiscoverContent() {
                     `/media/tmdb-${isTVShow ? "tv" : "movie"}-${media.id}-from-discover`,
                   )
                 }
-                className="max-h-200 text-center relative mt-3 mx-[0.2em] md:mx-[0.5em] transition-transform duration-[0.45s] hover:scale-105"
-                style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
+                className={`max-h-200 text-center relative mt-3 transition-transform duration-[0.45s] hover:scale-105 ${
+                  index === 0
+                    ? "md:ml-[6.5rem] mr-[0.2em] md:mr-[0.5em]"
+                    : index === array.length - 1
+                      ? "md:mr-[6.5rem] ml-[0.2em] md:ml-[0.5em]"
+                      : "mx-[0.2em] md:mx-[0.5em]"
+                }`}
+                style={{ flex: `0 0 ${movieWidth}` }}
               >
                 <Flare.Base className="group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-300 bg-transparent">
                   <Flare.Light