feat: updated carousel for small viewport (#66)

galaxyproject · Sep 26, 2024 · 072d36e · 072d36e
1 parent bcbe4e4
commit 072d36e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/...ts/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts b/...ts/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts
@@ -1,7 +1,7 @@
 export const CARD_OFFSET_Y = 8;
 export const CARD_SCALE_X = 40;
 export const MAX_CARD_HEIGHT = 216;
-export const MAX_CARD_HEIGHT_SM = 216;
+export const MAX_CARD_HEIGHT_SM = 280;
 export const MAX_DECK_SIZE = 1; // Currently, deck size is only 1 additional card.
 export const MAX_CARD_WIDTH = 504;
 export const CAROUSEL_HEIGHT = MAX_CARD_HEIGHT + MAX_DECK_SIZE * CARD_OFFSET_Y;

diff --git a/...nents/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts b/...nents/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts
@@ -1,4 +1,7 @@
-import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
+import {
+  mediaTabletDown,
+  mediaTabletUp,
+} from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
 import {
   inkLight,
   smokeMain,
@@ -74,6 +77,13 @@ export const CardContent = styled.div`
       margin-bottom: 0;
     }
   }
+
+  ${mediaTabletDown} {
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: 10;
+    overflow: hidden;
+  }
 `;
 
 export const CardCallToAction = styled(MButtonBase)`
@@ -85,6 +95,12 @@ export const CardCallToAction = styled(MButtonBase)`
     text-decoration-skip-ink: none;
     text-underline-position: from-font;
 
+    p {
+      color: inherit;
+      font: inherit;
+      margin: 0;
+    }
+
     &:hover {
       text-decoration: none;
     }