diff --git a/docs/release-control/v6/internal/subsystems/storage-recovery.md b/docs/release-control/v6/internal/subsystems/storage-recovery.md index 64ae6119b..78cf8e033 100644 --- a/docs/release-control/v6/internal/subsystems/storage-recovery.md +++ b/docs/release-control/v6/internal/subsystems/storage-recovery.md @@ -801,7 +801,10 @@ That same shell rule applies to the recovery-events workspace. pattern as the protected inventory surface, not a separate large titled header bar plus another full toolbar slab. Event filter labels should also stay on the canonical short Pulse vocabulary like `Platform` and `Status` instead of -recovery-only variants such as `History platform` or `History status`. +recovery-only variants such as `History platform` or `History status`. Both +recovery toolbars should also stay on compact shared select sizing instead of +inflating the row with recovery-local min-width overrides that make the +controls denser and wider than storage for the same amount of operator input. That same events-workspace rule should keep the activity strip as orientation for the event list rather than burying it at the bottom. The events workspace should move from the subtabs row to `RecoveryActivitySection.tsx`, then shared diff --git a/frontend-modern/src/components/Recovery/RecoveryHistorySection.tsx b/frontend-modern/src/components/Recovery/RecoveryHistorySection.tsx index 0c59359b0..fc6eca21c 100644 --- a/frontend-modern/src/components/Recovery/RecoveryHistorySection.tsx +++ b/frontend-modern/src/components/Recovery/RecoveryHistorySection.tsx @@ -363,7 +363,7 @@ export const RecoveryHistorySection: Component = (p ); props.setCurrentPage(1); }} - selectClass="min-w-[10rem] max-w-[14rem]" + selectClass="py-1 text-xs" > {(itemType) => ( @@ -386,7 +386,7 @@ export const RecoveryHistorySection: Component = (p ); props.setCurrentPage(1); }} - selectClass="min-w-[10rem] max-w-[14rem]" + selectClass="py-1 text-xs" > {(platform) => ( @@ -407,7 +407,7 @@ export const RecoveryHistorySection: Component = (p if (value !== 'all') props.setVerificationFilter('all'); props.setCurrentPage(1); }} - selectClass="min-w-[7rem]" + selectClass="py-1 text-xs" > {(outcome) => ( diff --git a/frontend-modern/src/components/Recovery/RecoveryProtectedInventorySection.tsx b/frontend-modern/src/components/Recovery/RecoveryProtectedInventorySection.tsx index 35ae67fd1..77146d8fb 100644 --- a/frontend-modern/src/components/Recovery/RecoveryProtectedInventorySection.tsx +++ b/frontend-modern/src/components/Recovery/RecoveryProtectedInventorySection.tsx @@ -255,7 +255,7 @@ export const RecoveryProtectedInventorySection: Component< ) } groupClass="gap-1.5 px-1.5 py-0.5" - selectClass="min-w-[10rem] max-w-[14rem] py-1.5 text-sm" + selectClass="py-1 text-xs" > {(itemType) => ( @@ -278,7 +278,7 @@ export const RecoveryProtectedInventorySection: Component< ) } groupClass="gap-1.5 px-1.5 py-0.5" - selectClass="min-w-[10rem] max-w-[14rem] py-1.5 text-sm" + selectClass="py-1 text-xs" > {(platform) => ( @@ -299,7 +299,7 @@ export const RecoveryProtectedInventorySection: Component< if (value !== 'all') props.setVerificationFilter('all'); }} groupClass="gap-1.5 px-1.5 py-0.5" - selectClass="min-w-[9rem] py-1.5 text-sm" + selectClass="py-1 text-xs" > {(outcome) => ( @@ -314,7 +314,7 @@ export const RecoveryProtectedInventorySection: Component< type="button" aria-pressed={props.protectedStaleOnly()} onClick={() => props.setProtectedStaleOnly((value) => !value)} - class={`rounded-md border px-3 py-1.5 text-sm font-medium transition-colors ${getRecoveryProtectedToggleClass( + class={`rounded-md border px-2.5 py-1 text-xs font-medium transition-colors ${getRecoveryProtectedToggleClass( props.protectedStaleOnly(), )}`} > diff --git a/frontend-modern/src/components/Recovery/__tests__/Recovery.test.tsx b/frontend-modern/src/components/Recovery/__tests__/Recovery.test.tsx index c1002e25c..867002e73 100644 --- a/frontend-modern/src/components/Recovery/__tests__/Recovery.test.tsx +++ b/frontend-modern/src/components/Recovery/__tests__/Recovery.test.tsx @@ -312,8 +312,20 @@ describe('Recovery', () => { expect(historySearch.closest('div.relative')?.className).toContain('w-full'); expect(within(historyTablist).getByRole('tab', { name: 'Protected items' })).toBeInTheDocument(); expect(within(historyTablist).getByRole('tab', { name: 'Recovery events' })).toBeInTheDocument(); + expect( + within(inventoryControls).getByLabelText('Item Type').className, + ).not.toContain('min-w-['); + expect( + within(inventoryControls).getByLabelText('Platform').className, + ).not.toContain('min-w-['); + expect( + within(inventoryControls).getByLabelText('Latest status').className, + ).not.toContain('min-w-['); expect(screen.getAllByText(/^1 event$/i)).toHaveLength(1); expect(within(historyControls).queryByText(/day group/i)).not.toBeInTheDocument(); + expect(within(historyControls).getByLabelText('Item type').className).not.toContain('min-w-['); + expect(within(historyControls).getByLabelText('Platform').className).not.toContain('min-w-['); + expect(within(historyControls).getByLabelText('Status').className).not.toContain('min-w-['); expect(within(historyTable).getByText('Item Type')).toBeInTheDocument(); expect(within(historyTable).getByText('Item')).toBeInTheDocument(); expect(within(historyTable).getByText('Platform')).toBeInTheDocument();