From 102832264527edb88b40ef029842f8ef5b8f2b72 Mon Sep 17 00:00:00 2001
From: fuomag9 <1580624+fuomag9@users.noreply.github.com>
Date: Fri, 27 Feb 2026 12:13:08 +0100
Subject: [PATCH] fix: collapse selected host chips to count badge when >2
 selected
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

renderTags now shows individual chips for 1-2 selections, and a single
'N hosts' chip (with clear-all × button) for 3+. Prevents the input
from growing vertically when many hosts are selected.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/(dashboard)/analytics/AnalyticsClient.tsx | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/(dashboard)/analytics/AnalyticsClient.tsx b/app/(dashboard)/analytics/AnalyticsClient.tsx
index b0bef07e..64709d1f 100644
--- a/app/(dashboard)/analytics/AnalyticsClient.tsx
+++ b/app/(dashboard)/analytics/AnalyticsClient.tsx
@@ -375,17 +375,28 @@ export default function AnalyticsClient() {
                   <ListItemText primary={option} primaryTypographyProps={{ variant: 'body2', noWrap: true }} />
                 </li>
               )}
-              renderTags={(value, getTagProps) =>
-                value.map((option, index) => (
+              renderTags={(value, getTagProps) => {
+                if (value.length <= 2) {
+                  return value.map((option, index) => (
+                    <Chip
+                      {...getTagProps({ index })}
+                      key={option}
+                      label={option}
+                      size="small"
+                      sx={{ maxWidth: 140 }}
+                    />
+                  ));
+                }
+                // Collapse to a single count chip so the input never grows tall
+                return [
                   <Chip
-                    {...getTagProps({ index })}
-                    key={option}
-                    label={option}
+                    key="count"
+                    label={`${value.length} hosts`}
                     size="small"
-                    sx={{ maxWidth: 120 }}
-                  />
-                ))
-              }
+                    onDelete={() => setSelectedHosts([])}
+                  />,
+                ];
+              }}
               renderInput={(params) => (
                 <TextField
                   {...params}