Fix: Adjust dropdown menu item layout for better text fitting (#3159)

- Updated the styling of `.DownloadsDropdownMenu__MenuItem` to improve text fitting and prevent text overlap.
mattermost · Nov 4, 2024 · ebbee6d · ebbee6d
1 parent 1545fed
commit ebbee6d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/common/utils/constants.ts b/src/common/utils/constants.ts
@@ -32,8 +32,8 @@ export const CALLS_PLUGIN_ID = 'com.mattermost.calls';
 export const DOWNLOADS_DROPDOWN_HEIGHT = 360;
 export const DOWNLOADS_DROPDOWN_WIDTH = 280;
 export const DOWNLOADS_DROPDOWN_PADDING = 24;
-export const DOWNLOADS_DROPDOWN_MENU_HEIGHT = 160;
-export const DOWNLOADS_DROPDOWN_MENU_WIDTH = 154;
+export const DOWNLOADS_DROPDOWN_MENU_HEIGHT = 260;
+export const DOWNLOADS_DROPDOWN_MENU_WIDTH = 200;
 export const DOWNLOADS_DROPDOWN_MENU_PADDING = 12;
 
 // In  order to display the box-shadow & radius on the left + right, use this WIDTH in the webContentsView for downloadsDropdown

diff --git a/src/renderer/css/downloadsDropdownMenu.scss b/src/renderer/css/downloadsDropdownMenu.scss
@@ -23,8 +23,8 @@ body {
     background-color: transparent;
     font-family: Open Sans;
     overflow: hidden;
-    height: 172px; // 160 + 12
-    width: 176px; // 154 + 12
+    min-height: fit-content;
+    width: 224px; // 200 + 12 + 12
 
     #app {
         background-color: transparent;
@@ -40,7 +40,6 @@ body {
             display: flex;
             flex-direction: column;
             height: 100%;
-            overflow: hidden;
             padding: 8px 0px;
             width: 100%;
 
@@ -52,9 +51,12 @@ body {
                 display: flex;
                 font-size: 14px;
                 font-weight: 400;
-                height: 25%;
+                flex-grow: 1;
+                height: fit-content(25%);
                 justify-content: flex-start;
-                padding-left: 20px;
+                padding: 8px 20px;
+                min-height: 36px;
+                width: 100%;
 
                 &:hover {
                     background-color: rgba(63, 67, 80, 0.08);