From 3ae94b017b1b96303df4983017aa4557e91570f2 Mon Sep 17 00:00:00 2001
From: DomW <domw30@gmail.com>
Date: Wed, 14 Aug 2024 10:53:13 +0100
Subject: [PATCH] feat: add menu class names to handle and improve select input
 dropdown menu width sizes (#2172)

---
 src/components/edit-profile/styles.scss                       | 3 ++-
 .../list/group-details-panel/group-type-menu/index.tsx        | 1 +
 .../list/group-details-panel/group-type-menu/styles.scss      | 4 ++++
 .../messenger/user-profile/settings-panel/index.tsx           | 1 +
 .../messenger/user-profile/settings-panel/styles.scss         | 4 ++++
 5 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/edit-profile/styles.scss b/src/components/edit-profile/styles.scss
index 32e5071ee..9d408970e 100644
--- a/src/components/edit-profile/styles.scss
+++ b/src/components/edit-profile/styles.scss
@@ -58,8 +58,9 @@
   &__zid-select-menu {
     max-height: 220px;
     overflow-y: auto;
+    overflow-x: hidden;
 
-    width: 100%;
+    width: 222px;
   }
 
   &__zid-menu-item-option {
diff --git a/src/components/messenger/list/group-details-panel/group-type-menu/index.tsx b/src/components/messenger/list/group-details-panel/group-type-menu/index.tsx
index 40dfc3e94..eae9b6f1e 100644
--- a/src/components/messenger/list/group-details-panel/group-type-menu/index.tsx
+++ b/src/components/messenger/list/group-details-panel/group-type-menu/index.tsx
@@ -86,6 +86,7 @@ export class GroupTypeMenu extends React.Component<Properties, State> {
             label=''
             value={selectedGroupType}
             itemSize='compact'
+            menuClassName='group-type-menu__dropdown'
           />
         </div>
         <div {...cn('select-input-label-container')} onClick={this.open}>
diff --git a/src/components/messenger/list/group-details-panel/group-type-menu/styles.scss b/src/components/messenger/list/group-details-panel/group-type-menu/styles.scss
index 1cb8ea0e1..97fa60bb3 100644
--- a/src/components/messenger/list/group-details-panel/group-type-menu/styles.scss
+++ b/src/components/messenger/list/group-details-panel/group-type-menu/styles.scss
@@ -33,4 +33,8 @@
   &__icon-button {
     @include glass-text-secondary-color;
   }
+
+  &__dropdown {
+    width: 222px;
+  }
 }
diff --git a/src/components/messenger/user-profile/settings-panel/index.tsx b/src/components/messenger/user-profile/settings-panel/index.tsx
index c0bf070e4..9a5509ec0 100644
--- a/src/components/messenger/user-profile/settings-panel/index.tsx
+++ b/src/components/messenger/user-profile/settings-panel/index.tsx
@@ -120,6 +120,7 @@ export class SettingsPanel extends React.Component<Properties> {
                   placeholder='Select Background'
                   value={selectedBackgroundLabel}
                   itemSize='compact'
+                  menuClassName='settings-panel__dropdown'
                 />
               </div>
             </div>
diff --git a/src/components/messenger/user-profile/settings-panel/styles.scss b/src/components/messenger/user-profile/settings-panel/styles.scss
index 3c8dc535b..b58ffefa8 100644
--- a/src/components/messenger/user-profile/settings-panel/styles.scss
+++ b/src/components/messenger/user-profile/settings-panel/styles.scss
@@ -95,4 +95,8 @@
     left: 22px;
     color: theme.$color-secondary-11;
   }
+
+  &__dropdown {
+    width: 222px;
+  }
 }