From 7582513b1a4db730e4c0b9a6dd2bc1f5c0e5b9d9 Mon Sep 17 00:00:00 2001 From: "Maksim \"s1Sharp\" Tsarkov" Date: Mon, 7 Oct 2024 18:32:20 +0300 Subject: [PATCH 1/2] Fix: Adjust dropdown menu item layout for better text fitting - Updated the styling of `.DownloadsDropdownMenu__MenuItem` to improve text fitting and prevent text overlap. - Changed `height` to `fit-content(25%)` to ensure the menu items dynamically adjust to content size. - Added `flex-grow: 1` to allow the items to expand and occupy available space within the menu. - Added `padding-right: 20px` to ensure text does not touch the right edge of the menu. --- src/renderer/css/downloadsDropdownMenu.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/renderer/css/downloadsDropdownMenu.scss b/src/renderer/css/downloadsDropdownMenu.scss index 2deb7ef206d..105d8c8aa32 100644 --- a/src/renderer/css/downloadsDropdownMenu.scss +++ b/src/renderer/css/downloadsDropdownMenu.scss @@ -52,9 +52,11 @@ 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-right: 20px; &:hover { background-color: rgba(63, 67, 80, 0.08); From da8221c2784a9ebd65d0fb61a5b51f9039ec2a41 Mon Sep 17 00:00:00 2001 From: "Maksim \"s1Sharp\" Tsarkov" Date: Thu, 17 Oct 2024 15:37:56 +0300 Subject: [PATCH 2/2] WIP --- src/common/utils/constants.ts | 4 ++-- src/main/views/downloadsDropdownMenuView.ts | 1 + src/renderer/css/downloadsDropdownMenu.scss | 15 +++++++++------ 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/common/utils/constants.ts b/src/common/utils/constants.ts index f7307722033..5c3fa27cf1f 100644 --- a/src/common/utils/constants.ts +++ b/src/common/utils/constants.ts @@ -33,8 +33,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 = 500; +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 browserView for downloadsDropdown diff --git a/src/main/views/downloadsDropdownMenuView.ts b/src/main/views/downloadsDropdownMenuView.ts index 1b4aed783e8..585d25a563b 100644 --- a/src/main/views/downloadsDropdownMenuView.ts +++ b/src/main/views/downloadsDropdownMenuView.ts @@ -75,6 +75,7 @@ export class DownloadsDropdownMenuView { // @ts-ignore transparent: true, }}); + this.view.setAutoResize({height: true}); this.view.webContents.loadURL('mattermost-desktop://renderer/downloadsDropdownMenu.html'); MainWindow.get()?.addBrowserView(this.view); }; diff --git a/src/renderer/css/downloadsDropdownMenu.scss b/src/renderer/css/downloadsDropdownMenu.scss index 105d8c8aa32..8cd8e711e7b 100644 --- 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 + height: auto; + width: 224px; #app { background-color: transparent; @@ -40,9 +40,10 @@ body { display: flex; flex-direction: column; height: 100%; - overflow: hidden; padding: 8px 0px; width: 100%; + height: auto; + max-height: none; .DownloadsDropdownMenu__MenuItem { align-items: center; @@ -55,8 +56,9 @@ body { flex-grow: 1; height: fit-content(25%); justify-content: flex-start; - padding-left: 20px; - padding-right: 20px; + padding: 8px 20px; + min-height: 36px; + width: 100%; &:hover { background-color: rgba(63, 67, 80, 0.08); @@ -69,6 +71,7 @@ body { } } + &.darkMode { background: #1f1f1f; border: 1px solid rgba(221, 223, 228, 0.16); @@ -89,4 +92,4 @@ body { } } } -} +} \ No newline at end of file