From f473dc1c2b6bfd19ce7b6c9cf0d6e853cbd9c356 Mon Sep 17 00:00:00 2001
From: Kevin Longe <273747162+kvlonge@users.noreply.github.com>
Date: Sat, 7 Nov 2026 12:21:16 +0000
Subject: [PATCH] fix(ui): wrap list toolbars instead of clipping their filters
 and counts

The list toolbar was one fixed-height row, so pages with many filters or
counts pushed them past the right edge. The search box now shrinks first and
the toolbar then wraps onto further rows.
---
 ui/src/lib/components/list/list-toolbar.svelte | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/ui/src/lib/components/list/list-toolbar.svelte b/ui/src/lib/components/list/list-toolbar.svelte
index 2d97289837..ed83d0f541 100644
--- a/ui/src/lib/components/list/list-toolbar.svelte
+++ b/ui/src/lib/components/list/list-toolbar.svelte
@@ -41,18 +41,21 @@
 </div>
 
 <style>
+	/* The search box shrinks first; past that the toolbar wraps onto more rows instead of clipping. */
 	.list-toolbar {
 		display: flex;
-		height: 50px;
-		flex: 0 0 50px;
+		min-height: 50px;
+		flex: 0 0 auto;
+		flex-wrap: wrap;
 		align-items: center;
-		gap: 6px;
-		padding: 0 20px;
+		gap: 8px 6px;
+		padding: 8px 20px;
 		border-bottom: 1px solid var(--border);
 	}
 	.list-search {
 		display: flex;
-		width: 280px;
+		flex: 1 1 180px;
+		max-width: 280px;
 		height: 30px;
 		align-items: center;
 		gap: 7px;
@@ -87,6 +90,7 @@
 	}
 	.list-filters {
 		display: flex;
+		flex-wrap: wrap;
 		align-items: center;
 		gap: 2px;
 	}