From e9ebf3ddea95ef6427ce2afa3cd6e2534c045e3d Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Wed, 20 May 2026 10:37:18 +0100
Subject: [PATCH] Style runtime chips to match Status row and runtime badges

The promoted Runtime chip group rendered with a verbose "All runtimes"
label and lowercase, dot-less docker/podman pills, breaking the visual
rhythm of the Status / Group by / Metric display chips it now sits
alongside. Map the runtime options to the same style as Status: concise
"All" for the empty value, capitalized "Docker" / "Podman" labels, and
leading dots in the canonical runtime badge colors (sky for Docker,
violet for Podman) so the chip palette echoes the runtime badges
rendered in the table rows.
---
 .../components/Workloads/WorkloadsFilter.tsx  | 24 +++++++++++++++++--
 .../__tests__/WorkloadsFilter.test.tsx        |  6 ++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend-modern/src/components/Workloads/WorkloadsFilter.tsx b/frontend-modern/src/components/Workloads/WorkloadsFilter.tsx
index b911c28369..7b4bc24a74 100644
--- a/frontend-modern/src/components/Workloads/WorkloadsFilter.tsx
+++ b/frontend-modern/src/components/Workloads/WorkloadsFilter.tsx
@@ -1,4 +1,4 @@
-import { Component, Show, createMemo } from 'solid-js';
+import { Component, JSX, Show, createMemo } from 'solid-js';
 import BoxIcon from 'lucide-solid/icons/box';
 import BoxesIcon from 'lucide-solid/icons/boxes';
 import MonitorIcon from 'lucide-solid/icons/monitor';
@@ -78,6 +78,26 @@ export const WorkloadsFilter: Component<WorkloadsFilterProps> = (props) => {
               : undefined,
     }));
 
+  const runtimeChipLabel = (value: string): string => {
+    if (value === '') return 'All';
+    if (value === 'docker') return 'Docker';
+    if (value === 'podman') return 'Podman';
+    return value;
+  };
+
+  const runtimeChipDot = (value: string): JSX.Element | undefined => {
+    if (value === 'docker') return statusDot('bg-sky-500');
+    if (value === 'podman') return statusDot('bg-violet-500');
+    return undefined;
+  };
+
+  const workloadRuntimeOptions = (sourceOptions: FilterSelectOption[]): FilterSelectOption[] =>
+    sourceOptions.map((option) => ({
+      ...option,
+      label: runtimeChipLabel(option.value),
+      leading: runtimeChipDot(option.value),
+    }));
+
   const showRuntimeFilter = () =>
     isContainerWorkloadViewMode(props.viewMode()) && Boolean(props.containerRuntimeFilter);
 
@@ -183,7 +203,7 @@ export const WorkloadsFilter: Component<WorkloadsFilterProps> = (props) => {
         value: () => runtimeFilter.value,
         setValue: runtimeFilter.onChange,
         defaultValue: '',
-        options: () => runtimeFilter.options,
+        options: () => workloadRuntimeOptions(runtimeFilter.options),
       });
     }
 
diff --git a/frontend-modern/src/components/Workloads/__tests__/WorkloadsFilter.test.tsx b/frontend-modern/src/components/Workloads/__tests__/WorkloadsFilter.test.tsx
index fea97d56fe..48e01ccf17 100644
--- a/frontend-modern/src/components/Workloads/__tests__/WorkloadsFilter.test.tsx
+++ b/frontend-modern/src/components/Workloads/__tests__/WorkloadsFilter.test.tsx
@@ -539,8 +539,8 @@ describe('WorkloadsFilter', () => {
       });
       render(() => <WorkloadsFilter {...props} />);
       const runtimeGroup = inlineFilterGroup('Runtime');
-      expect(within(runtimeGroup).getByRole('button', { name: 'docker' })).toBeInTheDocument();
-      expect(within(runtimeGroup).getByRole('button', { name: 'podman' })).toBeInTheDocument();
+      expect(within(runtimeGroup).getByRole('button', { name: 'Docker' })).toBeInTheDocument();
+      expect(within(runtimeGroup).getByRole('button', { name: 'Podman' })).toBeInTheDocument();
     });
 
     it('does not render when viewMode is not a container variant', () => {
@@ -578,7 +578,7 @@ describe('WorkloadsFilter', () => {
           })}
         />
       ));
-      pickInlineFilter('Runtime', 'docker');
+      pickInlineFilter('Runtime', 'Docker');
       expect(onChange).toHaveBeenCalledWith('docker');
     });
   });