test(ui): verify responsive rendering of ThemeQuickPresets (JhaSourav07#1675)

## Description

Adds additional UI test coverage for `ThemeQuickPresets`.

This PR verifies:

* All theme preset buttons render correctly.
* Accessible preset names are exposed to assistive technologies.
* The active preset exposes the correct `aria-pressed` state.
* High-contrast theme presets are present and selectable.
* The preset container uses a responsive wrapping layout suitable for
smaller viewports.

No production code was modified. This change only increases component
test coverage and helps ensure accessibility and responsive rendering
behavior remain stable.

Fixes JhaSourav07#1523

## Pillar

* [ ] 🎨 Pillar 1 — New Theme Design
* [ ] 📐 Pillar 2 — Geometric SVG Improvement
* [ ] 🕐 Pillar 3 — Timezone Logic Optimization
* [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview

N/A (test-only change)

## Checklist before requesting a review:

* [x] I have read the `CONTRIBUTING.md` file.
* [x] I have tested these changes locally.
* [x] I have run the relevant test commands locally.
* [x] My commits follow the Conventional Commits format.
* [ ] I have updated `README.md` if I added a new theme or URL
parameter. (Not applicable)
* [x] I have started the repo.
* [x] I have made sure that I have only one commit to merge in this PR.
* [ ] The SVG output matches the CommitPulse "premium quality" aesthetic
standard. (Not applicable)
* [ ] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

app/customize/components/ThemeQuickPresets.test.tsx

@@ -1,8 +1,8 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { ThemeQuickPresets } from './ThemeQuickPresets';
 import { THEME_KEYS } from '../types';
+import { themes } from '../../../lib/svg/themes';
 
 const validKeys = THEME_KEYS.filter((k) => k !== 'auto' && k !== 'random');
 
@@ -40,13 +40,41 @@ describe('ThemeQuickPresets', () => {
   });
 
   it('clicking a button calls onThemeChange with correct theme key', async () => {
-    const user = userEvent.setup();
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
     const inactiveKey = validKeys.find((k) => k !== 'dark')!;
     const inactiveBtn = screen.getByRole('button', {
       name: new RegExp(`apply ${inactiveKey} theme`, 'i'),
     });
-    await user.click(inactiveBtn);
+    fireEvent.click(inactiveBtn);
     expect(onThemeChange).toHaveBeenCalledWith(inactiveKey);
   });
 });
+
+describe('ThemeQuickPresets responsive rendering', () => {
+  const onThemeChange = vi.fn();
+
+  beforeEach(() => {
+    onThemeChange.mockClear();
+  });
+
+  it('renders every preset with accessible labels, high-contrast styling, and wrap layout', () => {
+    render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
+
+    const presetButtons = screen.getAllByRole('button', { name: /apply .+ theme/i });
+    expect(presetButtons).toHaveLength(validKeys.length);
+
+    expect(
+      screen.getByRole('button', { name: /apply dark theme/i }).getAttribute('aria-pressed')
+    ).toBe('true');
+
+    const highContrastButton = screen.getByRole('button', { name: /apply highcontrast theme/i });
+    expect(highContrastButton).toBeDefined();
+    expect(highContrastButton.getAttribute('title')).toBe('Highcontrast');
+    expect(highContrastButton.getAttribute('style')).toContain('rgb(10, 10, 10)');
+
+    const grid = highContrastButton.closest('div');
+    expect(grid).not.toBeNull();
+    expect(grid?.style.display).toBe('flex');
+    expect(grid?.style.flexWrap).toBe('wrap');
+  });
+});