CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-07-12 21:04:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

popovers: Move from global popover min-width to per-popover basis.

Browse Source 
This removes the common min-width being used across all popovers and
instead sets the min-width according to a popover's requirements.

This allows for greater control over the popovers since we have a
variety of use cases for them — which a single common min-width cannot
accommodate.
This commit is contained in:
Sayam Samal 2024-05-01 16:22:49 +05:30 committed by Tim Abbott
parent 6325ef4896
commit 4394e87ef1
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/styles/app_variables.css
View File

@ -59,7 +59,9 @@
--left-sidebar-header-icon-width: 15px;
/* Tippy popover related values */
--popover-menu-min-width: 230px;
--navbar-popover-menu-min-width: 230px;
--message-actions-popover-min-width: 230px;
--topic-actions-popover-min-width: 200px;
/* Information density and typography values */
/* The legacy values here are updated via JavaScript */

28
web/styles/popovers.css
View File

@ -1195,7 +1195,6 @@ ul {
border-radius: 6px;
.simplebar-content {
min-width: var(--popover-menu-min-width);
/* Set the popover menu width equal to the width of the
longest menu item, thus letting the menu items control
the width of the menu. */
@ -1297,6 +1296,29 @@ ul {
}
}
#help-menu-dropdown,
#gear-menu-dropdown,
#personal-menu-dropdown {
.simplebar-content {
min-width: var(--navbar-popover-menu-min-width);
}
}
#message-actions-menu-dropdown {
--popover-menu-max-width: 350px;
.simplebar-content {
min-width: var(--message-actions-popover-min-width);
}
}
#stream-actions-menu-popover,
#topic-actions-menu-popover {
.simplebar-content {
min-width: var(--topic-actions-popover-min-width);
}
}
.personal-menu-clear-status {
display: flex;
padding: 3px;
@ -1466,7 +1488,3 @@ ul.popover-menu-outer-list {
outline-offset: -1px;
}
}
#message-actions-menu-dropdown {
--popover-menu-max-width: 350px;
}