starred/webmail
1
0
Fork 0
mirror of https://github.com/bulwarkmail/webmail.git synced 2026-11-05 00:14:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: give the Mountain View search field the free width and keep it clear of the bell at large text

Browse Source
This commit is contained in:
Linus Rath
2026-11-03 08:30:10 +01:00
parent 7061c55985
commit b086f45511
2 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+16
View File
@@ -1165,6 +1165,22 @@ optgroup {
inset-inline-end: 3.25rem;
}
/* Large text in a narrow window leaves the field little width, less than these
paddings add up to: the input then stuck out under the bell, with the filter
button on top of the magnifier. Here the text gets what the magnifier had. */
[data-interface-layout="mountain-view"] .mv-topbar-search {
container-type: inline-size;
}
@container (max-width: 16rem) {
[data-interface-layout="mountain-view"] .mv-topbar input[data-search-input] {
padding-inline-start: 0.75rem;
padding-inline-end: 2.75rem;
}
[data-interface-layout="mountain-view"] .mv-topbar-search > div > form > div > svg {
display: none;
}
}
/* The magnifier sits on the field's baseline grid, one 48px hit area in. */
[data-interface-layout="mountain-view"] .mv-topbar-search > div > form > div > svg {
inset-inline-start: 1rem;
components/layout/mv-top-bar.tsx
+4 -2
View File
@@ -222,9 +222,11 @@ export function MvTopBar({
</Link>
</div>
{/* Search: left-anchored and capped, not centred */}
{/* Search: left-anchored and capped, not centred. It takes the free width
before the spacer gets any; shared equally, it stayed half as wide as
it could be, which at large text left no room for its own icons. */}
{search && (
<div className="mv-topbar-search relative flex items-center gap-1 flex-1 min-w-0 max-w-[720px]">
<div className="mv-topbar-search relative flex items-center gap-1 flex-1 grow-[9999] min-w-0 max-w-[720px]">
<SearchBox
value={search.query}
onChange={search.onQueryChange}