fix(ui): refine breadcrumb search icon and header border

This commit is contained in:
Andras Bacsai
2026-08-16 21:10:15 +02:00
parent 3fe1349ac4
commit bd79f4ec91
4 changed files with 7 additions and 4 deletions
@@ -23,7 +23,7 @@
class="listbox-panel scrollbar left-0! z-[90]! max-h-80! min-w-56 max-w-72">
<div class="searchable-listbox-search">
<x-reicon name="search"
class="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-neutral-400 dark:text-fg-faint" />
class="pointer-events-none absolute top-1/2 left-4 size-3 -translate-y-1/2 text-neutral-400 dark:text-fg-faint" />
<input x-ref="search" x-model.debounce.150ms="search" type="search"
autocomplete="off" placeholder="Search {{ strtolower($title) }}"
class="searchable-listbox-search-input" @keydown.escape.stop="open = false">
+2 -1
View File
@@ -55,7 +55,8 @@
@endif
</div>
{{-- Collapse toggle + team switcher --}}
<div class="flex items-center gap-0.5 min-w-0 flex-1 pl-3 pr-4">
<div
class="flex h-full items-center gap-0.5 min-w-0 flex-1 border-b border-neutral-200 pl-3 pr-4 dark:border-white/[0.06]">
<div class="relative flex min-w-0 flex-1 items-center">
<x-top-breadcrumb />
<div id="server-topbar-context" class="min-w-0"></div>
@@ -68,5 +68,6 @@ test('breadcrumb switchers let users search their items', function () {
->toContain('class="searchable-listbox-search"')
->toContain('class="searchable-listbox-search-input"')
->toContain('<x-reicon name="search"')
->toContain('left-4 size-3')
->toContain('.includes(search.toLowerCase())');
});
@@ -65,11 +65,12 @@ it('does not separate the desktop sidebar controls with a top border', function
->not->toContain('sticky bottom-0 mt-auto -mx-2 hidden items-center gap-1 border-t');
});
it('does not draw a bottom border below the desktop top bar', function () {
it('draws the desktop header border only above the main content', function () {
$layout = file_get_contents(resource_path('views/layouts/app.blade.php'));
expect($layout)
->toContain('fixed top-0 inset-x-0 z-50 h-12 items-center bg-white/95 dark:bg-panel/95 backdrop-blur')
->toContain('flex items-center gap-2 h-full shrink-0 border-r border-neutral-200')
->toContain('flex h-full items-center gap-0.5 min-w-0 flex-1 border-b border-neutral-200 pl-3 pr-4 dark:border-white/[0.06]')
->not->toContain('backdrop-blur border-b border-neutral-200 dark:border-white/[0.06]');
});