Improve pick item delete confirmation flow

src/components/PickItemRow.test.tsx

@@ -1,10 +1,23 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { PickItemRow } from './PickItemRow';
 import { PickItem } from '../models/PickItem';
 import { Product } from '../models/Product';
 
+const mockMatchMedia = (matches: boolean) => {
+  window.matchMedia = vi.fn().mockImplementation((query) => ({
+    matches,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+};
+
 const baseItem: PickItem = {
   id: 'item-1',
   pick_list_id: 'list-1',
@@ -29,6 +42,10 @@ const baseProduct: Product = {
 };
 
 describe('PickItemRow', () => {
+  beforeEach(() => {
+    mockMatchMedia(false);
+  });
+
   it('asks for confirmation before deleting a product from the pick list', async () => {
     const onDelete = vi.fn();
     const user = userEvent.setup();
@@ -52,7 +69,7 @@ describe('PickItemRow', () => {
     ).toBeVisible();
     expect(onDelete).not.toHaveBeenCalled();
 
-    await user.click(screen.getByRole('button', { name: /confirm delete/i }));
+    await user.click(screen.getByRole('button', { name: /^delete$/i }));
 
     expect(onDelete).toHaveBeenCalledTimes(1);
   });