Fix Machines filter toolbar layout

frontend-modern/src/features/platformPage/__tests__/sharedPlatformPage.test.ts

@@ -12,6 +12,7 @@ import {
   PlatformTablePercentValue,
   PlatformTableRelativeTimeValue,
   PlatformTableTemperatureValue,
+  PlatformTableToolbar,
   createPlatformTableFilterState,
   formatPlatformTableBytesValue,
   formatPlatformTableCountRatioValue,
@@ -235,6 +236,31 @@ describe('filterPlatformResources', () => {
   });
 });
 
+describe('PlatformTableToolbar', () => {
+  it('keeps table view options inside the shared filter toolbar with the row counter', () => {
+    render(() =>
+      PlatformTableToolbar({
+        search: () => '',
+        onSearchChange: () => undefined,
+        searchPlaceholder: 'Search rows',
+        status: 'all',
+        onStatusChange: () => undefined,
+        statusOptions: [{ value: 'all', label: 'All' }],
+        visible: 2,
+        total: 3,
+        rowNoun: 'rows',
+        viewOptionsTrailing: 'Columns',
+      }),
+    );
+
+    const columnsLabel = screen.getByText('Columns');
+    const filterBar = columnsLabel.closest('.filter-bar');
+
+    expect(filterBar).not.toBeNull();
+    expect(filterBar).toContainElement(screen.getByText('2 of 3 rows'));
+  });
+});
+
 describe('formatPlatformTableTextValue', () => {
   it('trims text values and uses the canonical platform-table empty cell marker', () => {
     expect(formatPlatformTableTextValue('  kubelet  ')).toBe('kubelet');

frontend-modern/src/features/platformPage/sharedPlatformPage.tsx

@@ -786,6 +786,7 @@ export function PlatformTableToolbar<T extends string | number>(props: {
   // chips behind "+ Filter".
   filters?: FilterDef[];
   savedViewsKey?: string;
+  viewOptionsTrailing?: JSX.Element;
 }) {
   const { isMobile } = useBreakpoint();
 
@@ -837,11 +838,14 @@ export function PlatformTableToolbar<T extends string | number>(props: {
       filters={allFilters}
       savedViewsKey={props.savedViewsKey}
       viewOptionsTrailing={
-        <PlatformResourceCounter
-          visible={props.visible}
-          total={props.total}
-          rowNoun={props.rowNoun}
-        />
+        <>
+          {props.viewOptionsTrailing}
+          <PlatformResourceCounter
+            visible={props.visible}
+            total={props.total}
+            rowNoun={props.rowNoun}
+          />
+        </>
       }
       showClearAll={() => Boolean(props.hasActiveFilters && props.onResetFilters)}
       onClearAll={props.onResetFilters}

frontend-modern/src/features/standalone/AgentsMachinesTable.tsx

@@ -1352,34 +1352,32 @@ export const AgentsMachinesTable: Component<{
       }
     >
       <div class="space-y-3">
-        <div class="flex flex-wrap items-center gap-2">
-          <div class="min-w-[280px] flex-1">
-            <PlatformTableToolbar
-              search={tableState.search}
-              onSearchChange={tableState.setSearch}
-              searchPlaceholder="Search machines"
-              searchHistory={{
-                storageKey: STORAGE_KEYS.MACHINES_SEARCH_HISTORY,
-                emptyMessage: 'Machine searches you run will appear here.',
-              }}
-              searchTips={AGENT_MACHINE_SEARCH_TIPS}
-              status={tableState.status()}
-              onStatusChange={tableState.setStatus}
-              statusOptions={PLATFORM_HEALTH_FILTER_OPTIONS}
-              visible={tableState.visible()}
-              total={tableState.total()}
-              rowNoun="machines"
-              hasActiveFilters={tableState.hasActiveFilters()}
-              onResetFilters={tableState.resetFilters}
+        <PlatformTableToolbar
+          search={tableState.search}
+          onSearchChange={tableState.setSearch}
+          searchPlaceholder="Search machines"
+          searchHistory={{
+            storageKey: STORAGE_KEYS.MACHINES_SEARCH_HISTORY,
+            emptyMessage: 'Machine searches you run will appear here.',
+          }}
+          searchTips={AGENT_MACHINE_SEARCH_TIPS}
+          status={tableState.status()}
+          onStatusChange={tableState.setStatus}
+          statusOptions={PLATFORM_HEALTH_FILTER_OPTIONS}
+          visible={tableState.visible()}
+          total={tableState.total()}
+          rowNoun="machines"
+          hasActiveFilters={tableState.hasActiveFilters()}
+          onResetFilters={tableState.resetFilters}
+          viewOptionsTrailing={
+            <ColumnPicker
+              columns={columnVisibility.availableToggles()}
+              isHidden={columnVisibility.isHiddenByUser}
+              onToggle={columnVisibility.toggle}
+              onReset={columnVisibility.resetToDefaults}
             />
-          </div>
-          <ColumnPicker
-            columns={columnVisibility.availableToggles()}
-            isHidden={columnVisibility.isHiddenByUser}
-            onToggle={columnVisibility.toggle}
-            onReset={columnVisibility.resetToDefaults}
-          />
-        </div>
+          }
+        />
 
         <Show
           when={tableState.filtered().length > 0}

frontend-modern/src/features/standalone/__tests__/AgentsMachinesTable.test.tsx

@@ -123,6 +123,24 @@ afterEach(() => {
 });
 
 describe('AgentsMachinesTable', () => {
+  it('keeps the column picker inside the shared machine filter toolbar', () => {
+    render(() => (
+      <AgentsMachinesTable
+        resources={[resource({ id: 'tower', name: 'Tower' })]}
+        emptyIcon={emptyIcon}
+        emptyTitle="No machines"
+        emptyDescription="Install Pulse Agent."
+      />
+    ));
+
+    const search = screen.getByPlaceholderText('Search machines');
+    const columnsButton = screen.getByTitle('Choose which columns to display');
+    const filterBar = columnsButton.closest('.filter-bar');
+
+    expect(filterBar).not.toBeNull();
+    expect(filterBar).toContainElement(search);
+  });
+
   it('surfaces machine-native monitoring columns for agent machines', async () => {
     render(() => (
       <AgentsMachinesTable