From 558d369ba05f5822165d314c61d6c4eaff68f8f6 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Wed, 26 Nov 2025 21:49:37 -0600
Subject: [PATCH] feat(know-your-world): improve region size filter layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Arrange checkboxes in a single column on the right side of the map
- Add "All" button to select all region sizes with one click
- Position filter panel from top to bottom of the map

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/DrillDownMapSelector.tsx       | 46 +++++++++++++++++--
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/arcade-games/know-your-world/components/DrillDownMapSelector.tsx b/apps/web/src/arcade-games/know-your-world/components/DrillDownMapSelector.tsx
index 13d827ad..2a2979b7 100644
--- a/apps/web/src/arcade-games/know-your-world/components/DrillDownMapSelector.tsx
+++ b/apps/web/src/arcade-games/know-your-world/components/DrillDownMapSelector.tsx
@@ -725,13 +725,14 @@ export function DrillDownMapSelector({
             )
           })()}
 
-        {/* Region Size Filters - positioned inside map, bottom right */}
+        {/* Region Size Filters - positioned inside map, right side as column */}
         <div
           data-element="region-size-filters"
           className={css({
             position: 'absolute',
-            bottom: '3',
+            top: '3',
             right: '3',
+            bottom: '3',
             display: 'flex',
             flexDirection: 'column',
             gap: '1',
@@ -745,12 +746,47 @@ export function DrillDownMapSelector({
             zIndex: 10,
           })}
         >
+          {/* Select All button */}
+          <button
+            data-action="select-all-sizes"
+            onClick={() => onRegionSizesChange([...ALL_REGION_SIZES])}
+            disabled={includeSizes.length === ALL_REGION_SIZES.length}
+            className={css({
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '1',
+              paddingX: '2',
+              paddingY: '1',
+              bg: isDark ? 'green.800' : 'green.500',
+              color: 'white',
+              border: '1px solid',
+              borderColor: isDark ? 'green.600' : 'green.600',
+              rounded: 'md',
+              cursor: includeSizes.length === ALL_REGION_SIZES.length ? 'default' : 'pointer',
+              opacity: includeSizes.length === ALL_REGION_SIZES.length ? 0.5 : 1,
+              transition: 'all 0.15s',
+              fontSize: 'xs',
+              fontWeight: '600',
+              _hover:
+                includeSizes.length === ALL_REGION_SIZES.length
+                  ? {}
+                  : {
+                      bg: isDark ? 'green.700' : 'green.600',
+                    },
+            })}
+          >
+            <span>✓</span>
+            <span>All</span>
+          </button>
+
+          {/* Size checkboxes in a column */}
           <div
             className={css({
               display: 'flex',
-              flexWrap: 'wrap',
+              flexDirection: 'column',
               gap: '1',
-              maxWidth: '280px',
+              flex: 1,
             })}
           >
             {ALL_REGION_SIZES.map((size) => {
@@ -775,7 +811,7 @@ export function DrillDownMapSelector({
                   onCheckedChange={handleToggle}
                   disabled={isOnlyOne}
                   className={css({
-                    display: 'inline-flex',
+                    display: 'flex',
                     alignItems: 'center',
                     gap: '1',
                     paddingX: '2',