phlux/mattermostest
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
- Updated the styling of `.DownloadsDropdownMenu__MenuItem` to improve text fitting and prevent text overlap.
This commit is contained in:
Tsarkov Maksim
2024-11-04 17:12:30 +03:00
committed by GitHub
parent 1545fedb31
commit ebbee6da5d
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/utils/constants.ts
View File

@@ -32,8 +32,8 @@ export const CALLS_PLUGIN_ID = 'com.mattermost.calls';
export const DOWNLOADS_DROPDOWN_HEIGHT = 360; export const DOWNLOADS_DROPDOWN_HEIGHT = 360;
export const DOWNLOADS_DROPDOWN_WIDTH = 280; export const DOWNLOADS_DROPDOWN_WIDTH = 280;
export const DOWNLOADS_DROPDOWN_PADDING = 24; export const DOWNLOADS_DROPDOWN_PADDING = 24;
export const DOWNLOADS_DROPDOWN_MENU_HEIGHT = 160; export const DOWNLOADS_DROPDOWN_MENU_HEIGHT = 260;
export const DOWNLOADS_DROPDOWN_MENU_WIDTH = 154; export const DOWNLOADS_DROPDOWN_MENU_WIDTH = 200;
export const DOWNLOADS_DROPDOWN_MENU_PADDING = 12; 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 // In order to display the box-shadow & radius on the left + right, use this WIDTH in the webContentsView for downloadsDropdown

12
src/renderer/css/downloadsDropdownMenu.scss
View File

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