diff --git a/src/Web/autopilot-monitor-web/components/TenantScopeSelector.tsx b/src/Web/autopilot-monitor-web/components/TenantScopeSelector.tsx index 1cb326cd..154e16fa 100644 --- a/src/Web/autopilot-monitor-web/components/TenantScopeSelector.tsx +++ b/src/Web/autopilot-monitor-web/components/TenantScopeSelector.tsx @@ -18,7 +18,8 @@ export interface TenantSelectorScope { * can drop it into a header unconditionally. * * @param allowAggregated when true, prepends an "All tenants (aggregated)" option (value "") - * for the aggregated-capable page variant. Defaults to false (override-only pages). + * for the aggregated-capable page variant, plus a one-click "×" reset back to the aggregate + * while a specific tenant is selected. Defaults to false (override-only pages). * @param themed when true, adds dark-mode (`dark:`) variants so the control matches dark-aware * headers (e.g. the SLA page). Defaults to false — most consuming pages are light-only and a * dark selector on their non-themed header would itself be a mismatch. @@ -42,6 +43,11 @@ export function TenantScopeSelector({ const selectClass = themed ? "text-sm border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1.5 max-w-[220px] sm:max-w-xs bg-white dark:bg-gray-700 text-gray-900 dark:text-white" : "text-sm border border-gray-300 rounded-md px-2 py-1.5 max-w-[220px] sm:max-w-xs"; + const resetClass = themed + ? "text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors" + : "text-gray-400 hover:text-gray-600 transition-colors"; + + const showReset = allowAggregated && !scope.isDelegatedScope && scope.selectedTenantId !== ""; return (