fixed homepage horizontal scroller shadows

DA0-DA0 · Sep 25, 2024 · b480b57 · b480b57
1 parent 0f43901
commit b480b57
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/packages/stateless/components/HorizontalScroller.tsx b/packages/stateless/components/HorizontalScroller.tsx
@@ -14,6 +14,7 @@ export interface HorizontalScrollerProps<P extends {}> {
   itemClassName?: string
   containerClassName?: string
   shadowClassName?: string
+  contentContainerClassName?: string
 }
 
 export const HorizontalScroller = <P extends {}>({
@@ -22,6 +23,7 @@ export const HorizontalScroller = <P extends {}>({
   itemClassName,
   containerClassName,
   shadowClassName,
+  contentContainerClassName,
 }: HorizontalScrollerProps<P>) => {
   const { t } = useTranslation()
 
@@ -76,7 +78,12 @@ export const HorizontalScroller = <P extends {}>({
           className="no-scrollbar w-full overflow-scroll"
           ref={scrollableContainerRef}
         >
-          <div className="flex w-max flex-row gap-2 py-1 sm:gap-3">
+          <div
+            className={clsx(
+              'flex w-max flex-row gap-2 py-1 sm:gap-3',
+              contentContainerClassName
+            )}
+          >
             {items.loading
               ? [...Array(5)].map((_, index) => (
                   <div key={index} className={itemClassName}>

diff --git a/packages/stateless/pages/Home.tsx b/packages/stateless/pages/Home.tsx
@@ -169,11 +169,10 @@ export const Home = ({
               (chainGovDaos.loading || chainGovDaos.data.length > 0) &&
                 UNDO_PAGE_PADDING_HORIZONTAL_CLASSES
             )}
-            // Margin offsets container padding.
+            contentContainerClassName="px-6"
             itemClassName="w-64"
             items={chainGovDaos}
-            // Max width of 5xl = 64rem, container padding of 6 = 1.5rem
-            shadowClassName="w-[max((100%-64rem)/2,1.5rem)]"
+            shadowClassName="w-6"
           />
         </div>
       )}
@@ -206,10 +205,10 @@ export const Home = ({
             (featuredDaos.loading || featuredDaos.data.length > 0) &&
               UNDO_PAGE_PADDING_HORIZONTAL_CLASSES
           )}
+          contentContainerClassName="px-6"
           itemClassName="w-64"
           items={featuredDaos}
-          // Max width of 5xl = 64rem, container padding of 6 = 1.5rem
-          shadowClassName="w-[max((100%-64rem)/2,1.5rem)]"
+          shadowClassName="w-6"
         />
       </div>
     </>