From fbba0bf13bd927d15cc22d2223f28a12432ac5c9 Mon Sep 17 00:00:00 2001
From: Mark Greene <markgreene5833@gmail.com>
Date: Sun, 4 Oct 2026 20:07:52 +1300
Subject: [PATCH 1/2] Fix: constrain playlist filter width

The filters on the playlist page stretched into one long strip beside the tank pool, squeezing the pool into the remaining space.

**Changes**
- Place the filters and the generate button in a fixed-width column (`22rem`) on medium screens and up so the filter buttons wrap compactly
- Stretch the generate button to the column width
- Let the tank pool take the remaining width
- Tighten the gap between the two columns
- Keep the existing stacked layout on small screens
---
 packages/website/src/components/PlaylistGenerator.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/website/src/components/PlaylistGenerator.tsx b/packages/website/src/components/PlaylistGenerator.tsx
index c533495ca..b50c74654 100644
--- a/packages/website/src/components/PlaylistGenerator.tsx
+++ b/packages/website/src/components/PlaylistGenerator.tsx
@@ -25,6 +25,7 @@ import { FilterControl } from "./TankSearch/components/FilterControl";
 const tankDefinitions = await api.tankDefinitions();
 
 const POOL_HEIGHT = "16rem";
+const FILTERS_WIDTH = "22rem";
 
 export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) {
   const [largeWarningOpen, setLargeWarningOpen] = useState(false);
@@ -80,13 +81,19 @@ export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) {
       <Flex justify="center" width="100%" align="center" px="4">
         <Flex
           flexGrow="1"
-          gap="9"
+          gap="6"
           align="center"
           justify="center"
           maxWidth="80rem"
           direction={{ initial: "column-reverse", md: "row" }}
         >
-          <Flex direction="column" gap="4" align="center">
+          <Flex
+            direction="column"
+            gap="4"
+            align="stretch"
+            flexShrink="0"
+            width={{ initial: "100%", md: FILTERS_WIDTH }}
+          >
             <FilterControl />
 
             <Button

From 646d6fa7d5ddd2d63065d1908a087c75a1de50ea Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 9 Oct 2026 16:54:37 -0500
Subject: [PATCH 2/2] center align and max width 32rem

---
 packages/website/src/components/PlaylistGenerator.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/website/src/components/PlaylistGenerator.tsx b/packages/website/src/components/PlaylistGenerator.tsx
index b50c74654..a64999bc4 100644
--- a/packages/website/src/components/PlaylistGenerator.tsx
+++ b/packages/website/src/components/PlaylistGenerator.tsx
@@ -25,7 +25,7 @@ import { FilterControl } from "./TankSearch/components/FilterControl";
 const tankDefinitions = await api.tankDefinitions();
 
 const POOL_HEIGHT = "16rem";
-const FILTERS_WIDTH = "22rem";
+const FILTERS_WIDTH = "32rem";
 
 export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) {
   const [largeWarningOpen, setLargeWarningOpen] = useState(false);
@@ -90,7 +90,7 @@ export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) {
           <Flex
             direction="column"
             gap="4"
-            align="stretch"
+            align="center"
             flexShrink="0"
             width={{ initial: "100%", md: FILTERS_WIDTH }}
           >