paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 21:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

search: Align suggestion left padding with search bar icon space.

Browse Source 
(cherry picked from commit fc9bbd37a0)
This commit is contained in:
Evy Kassirer
2025-09-18 13:52:03 -07:00
committed by Tim Abbott
parent 62363bdca9
commit 11d43ffa13
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/styles/app_variables.css
View File

@@ -197,6 +197,12 @@
--search-pill-label-min-width: 2.5em; /* 35px at 14px/em */
/*
This is the space for the searchbar's search icon, and the left padding
for the search suggestions so they match up with searchbar content.
*/
--search-left-padding: 35px;
/*
Since #navbar_alerts_wrapper can take variable height depending upon
window width / language, we sync its height in navbar_alerts.js

7
web/styles/search.css
View File

@@ -224,7 +224,7 @@
border: none;
grid-template:
"search-icon search-pills search-close" var(--search-box-height)
". search-pills ." auto / auto minmax(0, 1fr)
". search-pills ." auto / var(--search-left-padding) minmax(0, 1fr)
1.75em; /* 28px at 16px em */
align-content: center;
cursor: pointer;
@@ -232,8 +232,7 @@
/* Override styles for .pill-container that aren't relevant for search. */
&.pill-container {
background: inherit;
/* Maintain only a column gap. */
gap: 0 0.3125em; /* 5px at 16px em */
gap: 0;
/* Override padding. */
padding: 0;
}
@@ -382,7 +381,7 @@
}
.typeahead-menu .simplebar-content > li > a {
padding: 3px 40px;
padding: 3px var(--search-left-padding);
/* Override white-space: nowrap from zulip.css */
white-space: normal;