Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css: Scale typeaheads / dropdowns with font size. 

Fixes #30780

Adjusted both width and line height of typeaheads and dropdown widgets
to scale font size.
This commit is contained in:
Aman Agrawal 2024-07-10 11:31:02 +00:00 committed by Tim Abbott
parent a5c922a99f
commit e5e5ba6cea
3 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/styles/popovers.css
View File

@ -75,7 +75,7 @@
0 2px 4px hsl(0deg 0% 0% / 10%); 0 2px 4px hsl(0deg 0% 0% / 10%);
.tippy-content { .tippy-content {
font-size: 14px; font-size: var(--base-font-size-px);
color: hsl(0deg 0% 75%); color: hsl(0deg 0% 75%);
padding: 0; padding: 0;
} }

9
web/styles/typeahead.css
View File

@ -25,10 +25,16 @@
font-weight: normal; font-weight: normal;
/* We want to keep this `max-width` less than 320px. */ /* We want to keep this `max-width` less than 320px. */
max-width: 292px; max-width: 292px;
line-height: 20px; line-height: var(--base-line-height-unitless);
color: var(--color-dropdown-item); color: var(--color-dropdown-item);
white-space: nowrap; white-space: nowrap;
@media (width >= $ml_min) {
/* Scale up with font size on larger widths. */
/* 292px / 14px */
max-width: 20.86em;
}
/* hidden text just to maintain line height for a blank option */ /* hidden text just to maintain line height for a blank option */
strong:empty { strong:empty {
&::after { &::after {
@ -77,6 +83,7 @@
} }
.autocomplete_secondary { .autocomplete_secondary {
align-self: center;
opacity: 0.8; opacity: 0.8;
font-size: 85%; font-size: 85%;
flex: 1 1 0; flex: 1 1 0;

11
web/styles/zulip.css
View File

@ -2156,7 +2156,8 @@ body:not(.hide-left-sidebar) {
.dropdown-list-wrapper { .dropdown-list-wrapper {
/* Sync with `max-height` in dropdown_widget. */ /* Sync with `max-height` in dropdown_widget. */
max-height: 210px; max-height: 210px;
min-width: 200px; /* 200px/14px */
min-width: 14.285em;
.dropdown-list { .dropdown-list {
list-style: none; list-style: none;
@ -2189,13 +2190,13 @@ body:not(.hide-left-sidebar) {
padding: 3px 10px 3px 8px; padding: 3px 10px 3px 8px;
gap: 4px; gap: 4px;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: var(--base-line-height-unitless);
white-space: normal; white-space: normal;
.stream-privacy-type-icon { .stream-privacy-type-icon {
font-size: 13px; font-size: 0.93em;
width: 13px; width: 0.93em;
height: 13px; height: 0.93em;
padding-right: 2px; padding-right: 2px;
} }