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

search pills: Prevent overflow for very long pills.

Browse Source
This commit is contained in:
evykassirer
2024-07-10 15:26:58 -07:00
committed by Tim Abbott
parent dc1fb85cf0
commit 7cb00d171e
2 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/styles/input_pill.css
View File

@@ -35,6 +35,7 @@
.pill-image { .pill-image {
height: var(--length-input-pill-image); height: var(--length-input-pill-image);
width: var(--length-input-pill-image); width: var(--length-input-pill-image);
min-width: var(--length-input-pill-image);
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
} }

10
web/styles/search.css
View File

@@ -223,7 +223,7 @@
var(--search-box-height), var(--search-box-height),
auto auto
) )
/ auto minmax(0, 1fr) auto; / auto minmax(0, 1fr) 28px;
align-items: start; align-items: start;
cursor: pointer; cursor: pointer;
@@ -244,7 +244,6 @@
} }
.user-pill-container { .user-pill-container {
min-width: fit-content;
gap: 5px; gap: 5px;
> .pill-label { > .pill-label {
@@ -259,6 +258,9 @@
height: var(--height-input-pill); height: var(--height-input-pill);
border: none; border: none;
border-radius: 3px; border-radius: 3px;
max-width: none;
display: grid;
grid-template-columns: auto 1fr auto;
&:not(.deactivated-pill) { &:not(.deactivated-pill) {
background-color: var(--color-background-user-pill); background-color: var(--color-background-user-pill);
@@ -267,6 +269,10 @@
} }
} }
.pill-label {
min-width: 30px;
}
@media (width >= $md_min) { @media (width >= $md_min) {
.navbar-search { .navbar-search {
background: var(--color-background-search); background: var(--color-background-search);