feat: convert theme presets to horizontally scrollable carousel on mobile (JhaSourav07#2187)

## Description

This PR improves the mobile responsiveness of the Customization Studio
by converting the Theme Preset section into a horizontally scrollable
layout on smaller screens.

### Changes Made

* Added horizontal scrolling support for Theme Presets on mobile
devices.
* Preserved the existing wrapped layout behavior on larger screens.
* Reduced vertical space usage and improved theme browsing experience on
narrow viewports.
* Updated the related test assertions to match the new implementation.

Fixes JhaSourav07#1886

## Pillar

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

## Visual Preview

### Before

<img width="391" height="847" alt="Screenshot 2026-06-01 001208"
src="https://github.com/user-attachments/assets/378de170-9362-49b8-b810-4902361aca5c"
/>


* Theme Presets were displayed in multiple rows on mobile screens,
consuming excessive vertical space.

### After

<img width="387" height="844" alt="Screenshot 2026-06-01 001255"
src="https://github.com/user-attachments/assets/32555876-d659-4093-bade-18fa32fca5ee"
/>


* Theme Presets are displayed in a horizontally scrollable row on mobile
screens, improving usability and reducing scrolling.


## Checklist before requesting a review:

* [x] I have read the `CONTRIBUTING.md` file.
* [x] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
* [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors.
* [ ] I have run `npm run test` and all tests pass locally.
* [ ] I have run `npm run test:coverage` and branch coverage is at or
above 70%.
* [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 starred the repo.
* [x] I have made sure that I have only one commit to merge in this PR.
* [x] The changes maintain the existing UI quality and responsiveness
standards.
* [x] (Recommended) I joined the CommitPulse Discord server for faster
collaboration, mentorship, and PR support.

Author: JhaSourav07

app/customize/components/ThemeQuickPresets.css

@@ -92,3 +92,28 @@
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.85);
 }
+.theme-quick-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  width: 100%;
+  max-width: 100%;
+}
+
+@media (max-width: 640px) {
+  .theme-quick-presets {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    width: 100%;
+    max-width: calc(100vw - 96px);
+    padding-bottom: 8px;
+    scroll-snap-type: x proximity;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .theme-quick-presets .tqp-btn {
+    flex: 0 0 auto;
+    scroll-snap-align: start;
+  }
+}

app/customize/components/ThemeQuickPresets.test.tsx

@@ -133,8 +133,7 @@ describe('ThemeQuickPresets responsive rendering & high-contrast', () => {
     const grid = buttons.at(0)?.parentElement;
 
     expect(grid).not.toBeNull();
-    expect(grid?.style.display).toBe('flex');
-    expect(grid?.style.flexWrap).toBe('wrap');
+    expect(grid?.className).toContain('theme-quick-presets');
   });
 
   it('check if each preset button has theme bg colour(inline)', () => {

app/customize/components/ThemeQuickPresets.tsx

@@ -519,7 +519,7 @@ const ICON_MAP: Record<string, (c: IC) => ReactElement> = {
 export function ThemeQuickPresets({ theme, onThemeChange }: ThemeQuickPresetsProps): ReactElement {
   return (
     <>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
+      <div className="theme-quick-presets">
         {THEME_KEYS.filter((key) => key !== 'auto' && key !== 'random').map((key) => {
           const t = themes[key as ThemeKey];
           if (!t) return null;