Render featured resources as column

gravitational · Feb 5, 2024 · 4dcd89f · 4dcd89f
1 parent c22f8ab
commit 4dcd89f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 36 deletions.
diff --git a/components/DropdownMenu/DropdownMenuItem.module.css b/components/DropdownMenu/DropdownMenuItem.module.css
@@ -8,16 +8,6 @@
   }
 
   max-width: min-content;
-  &.moreThan {
-    @media (max-width: 1650px) {
-      display: block;
-    }
-  }
-  &.lessThan {
-    @media (max-width: 1250px) {
-      display: block;
-    }
-  }
 }
 
 .styledLink {
@@ -51,26 +41,18 @@
 .imageItem {
   display: flex;
   justify-content: flex-start;
-  flex-direction: row;
+  align-items: flex-start;
+  flex-direction: column;
   border: 1px solid #f0f2f4;
   overflow: hidden;
-  min-height: 140px;
-  width: 100%;
+  width: 180px;
   min-width: unset;
   box-sizing: unset;
-  @media (max-width: 1250px) {
-    flex-direction: column;
-  }
-  @media (max-width: 1650px) {
-    &.asColumn {
-      flex-direction: column;
-    }
-  }
 }
 .imageBox {
   width: 180px;
-  height: 100%;
   max-width: 180px;
+  height: auto;
   flex-shrink: 0;
   align-self: center;
   position: relative;
@@ -95,6 +77,7 @@
     @media (--nav) {
       min-width: 40%;
       max-width: 50%;
+      margin-right: 8px;
     }
   }
 }
@@ -130,7 +113,7 @@
 .imageTitle {
   font-size: 14px;
   line-height: 18px;
-  font-weight: 400;  
+  font-weight: 400;
   @media (--nav) {
     font-size: 14px;
     line-height: 20px;
@@ -148,7 +131,7 @@
   font-size: 14px;
   line-height: 18px;
   font-weight: 400;
-  
+
   @media (--nav) {
     font-size: 14px;
     line-height: 20px;

diff --git a/components/DropdownMenu/DropdownMenuItem.tsx b/components/DropdownMenu/DropdownMenuItem.tsx
@@ -45,23 +45,16 @@ const DropdownMenuItem = ({
       </div>
     </Link>
   ) : (
-    <div
-      className={cn(
-        styles.wrapper,
-        itemAmount > 3 ? styles.moreThan : styles.lessThan
-      )}
-    >
+    <div className={styles.wrapper}>
       {imageTitle && <h3 className={styles.imageTitle}>{imageTitle}</h3>}
       <Link className={styles.styledLink} href={link}>
-        <div
-          className={cn(styles.imageItem, itemAmount > 3 && styles.asColumn)}
-        >
+        <div className={styles.imageItem}>
           <div className={styles.imageBox}>
             <Image
               src={customImage?.itemImage || ""}
-              width={250}
-              height={150}
-              sizes="250px"
+              width={180}
+              height={100}
+              sizes="180px"
               alt=""
             />
           </div>