style: responsive image scaling

gravitational · Jan 24, 2024 · 6e97cbd · 6e97cbd
1 parent b59a6d2
commit 6e97cbd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/components/DropdownMenu/DropdownMenuItem.module.css b/components/DropdownMenu/DropdownMenuItem.module.css
@@ -44,6 +44,7 @@ max-width: min-content;
   justify-content: flex-start;
   flex-direction: row;
   border: 1px solid #F0F2F4;
+  overflow: hidden;
   min-height: 140px;
   width: 100%;
   min-width: unset;
@@ -59,26 +60,35 @@ max-width: min-content;
   }
 }
 .imageBox {
-  width:100%;
+  width:250px;
   height:100%;
   max-width: 250px;
   flex-shrink: 0;
+  align-self: center;
   position: relative;
-  &:img {
-    position: relative;
-    object-fit: cover;
+  @media (--lg-scr) {
+    flex-shrink: 1;
   }
 }
-
+.imageBox img {
+  position: relative;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
 .item {
   margin-left: 8px;
   color: var(--color-code);
  @media (--nav) {
   margin-left: 16px;
  }
-  &.moreMargin {
+  &.imageitemText {
     margin-top: 12px;
     margin-bottom: 12px;
+    @media (--nav) {
+      min-width: 40%;
+      max-width: 50%;
+    }
   }
 }
 .itemTitle {

diff --git a/components/DropdownMenu/DropdownMenuItem.tsx b/components/DropdownMenu/DropdownMenuItem.tsx
@@ -61,7 +61,7 @@ const DropdownMenuItem = ({
               alt=""
             />
           </div>
-          <div className={cn(styles.item, styles.moreMargin)} {...props}>
+          <div className={cn(styles.item, styles.imageItemText)} {...props}>
             <p className={styles.imageItemTitle}>{customImage?.itemTitle}</p>
             {customImage?.imageDate && (
               <p className={styles.dateText}>{customImage?.imageDate}</p>