feat: add menu class names to handle and improve select input dropdow…

…n menu width sizes (#2172)

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 {

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}>

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;
+  }
 }

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>

src/components/messenger/user-profile/settings-panel/styles.scss

@@ -95,4 +95,8 @@
     left: 22px;
     color: theme.$color-secondary-11;
   }
+
+  &__dropdown {
+    width: 222px;
+  }
 }