From 997c6bc48059b22236b2aca3676cdd688aa8c6dc Mon Sep 17 00:00:00 2001
From: Jason Dicker <110084728+jasondicker@users.noreply.github.com>
Date: Mon, 20 Jan 2025 13:41:02 +0200
Subject: [PATCH] yoma: opportunities - hide the scrollbar on the slider tray
 (scroll issue) and padding of headings (#1201)

---
 .../src/components/Opportunity/OpportunitiesCarousel.tsx  | 2 +-
 src/web/src/styles/globals.scss                           | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/web/src/components/Opportunity/OpportunitiesCarousel.tsx b/src/web/src/components/Opportunity/OpportunitiesCarousel.tsx
index 11616eb16..0d7870b90 100644
--- a/src/web/src/components/Opportunity/OpportunitiesCarousel.tsx
+++ b/src/web/src/components/Opportunity/OpportunitiesCarousel.tsx
@@ -114,7 +114,7 @@ const OpportunitiesCarousel: React.FC<{
       step={visibleSlides}
     >
       <div className="mb-2 flex flex-col gap-6">
-        <div className="flex max-w-full flex-row px-0 md:max-w-7xl md:px-2">
+        <div className="flex max-w-full flex-row px-2 md:max-w-7xl">
           <div className="flex flex-grow flex-col">
             <div className="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold text-black md:max-w-[800px] md:text-xl">
               {title}
diff --git a/src/web/src/styles/globals.scss b/src/web/src/styles/globals.scss
index fb0621f5d..aa7b7a7a2 100644
--- a/src/web/src/styles/globals.scss
+++ b/src/web/src/styles/globals.scss
@@ -119,8 +119,14 @@ html:has(body.content-overflow-y) {
 .rssas-circle {
   background: theme("colors.purple") !important;
 }
+
+/* Hide the scrollbar on the slider tray */
 .rssas-slider-tray {
-  overflow-x: hidden !important;
+  &::-webkit-scrollbar {
+    display: none; /* Safari and Chrome */
+  }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 /* Adjust Z-Index for Feedback Button */