paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-01 04:23:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

navbar_dropdowns: Let menu items control the width of dropdown menus.

Browse Source 
Through this commit, we set the width of the navbar dropdowns to be
equal to the longest menu item, via the min-content intrinsic sizing.

Note, that the min-content width takes into account all soft-wrapping
opportunities, which could result in the wrapping of the menu items in
many cases. To prevent this, we use the white-space property to prevent
menu items from wrapping in any case.
This commit is contained in:
Sayam Samal
2023-12-07 03:24:38 +05:30
committed by Tim Abbott
parent ada73eb6e0
commit ca9b1060b7
2 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/styles/popovers.css
View File

@@ -1208,15 +1208,22 @@ ul {
border: solid 1px var(--color-border-dropdown-menu);
background-color: var(--color-background-dropdown-menu);
max-height: 85vh;
min-width: 230px;
overflow-x: hidden;
user-select: none;
border-radius: 6px;
box-shadow: var(--box-shadow-navbar-dropdown-menu);
.simplebar-content {
min-width: var(--popover-menu-min-width);
/* This is necessary to set the dropdown menu width equal to
the width of the longest menu item, thus letting the menu
items control the width of the menu. */
width: min-content;
}
.navbar-dropdown-menu-inner-list-item {
/* This is necessary to keep long menu items on a single line. */
min-width: max-content;
white-space: nowrap;
}
.text-item,

3
web/styles/zulip.css
View File

@@ -104,6 +104,9 @@ body {
--right-sidebar-width: 250px;
--left-sidebar-header-icon-width: 15px;
/* Tippy popover related values */
--popover-menu-min-width: 230px;
/*
Message box elements and values.
*/