From 6e97cbd57e7b1f02ac3793cab9728fcb2a3b15f9 Mon Sep 17 00:00:00 2001
From: TuukkaIkius <tuukka@ikius.com>
Date: Wed, 24 Jan 2024 16:41:18 +0200
Subject: [PATCH] style: responsive image scaling

---
 .../DropdownMenu/DropdownMenuItem.module.css  | 22 ++++++++++++++-----
 components/DropdownMenu/DropdownMenuItem.tsx  |  2 +-
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/components/DropdownMenu/DropdownMenuItem.module.css b/components/DropdownMenu/DropdownMenuItem.module.css
index 44b35d6bca..a2dd86c24e 100644
--- 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
index 8a5668e966..2901905a49 100644
--- 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>