From 99e6a456a723eea78b345d6a07b6a9b6dcbb0b4b Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sun, 14 Jun 2026 15:32:19 -0400
Subject: [PATCH] fix: use CSS grid + plain divs for decoration grid, eliminate
 flex-shrink overlap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The outer Box(direction=Column, gap=300) was a flex column with flex-shrink:1
on children. With maxHeight:480 + overflowY:auto, when total content exceeded
480px the flex children compressed into each other, making cells appear to
overlap regardless of the gap on the inner flex container.

Replace with:
- Plain div scroll container (display:flex flex-direction:column gap:24)
  so children never shrink — they overflow into scroll area
- Plain div per category (gap:10 between label and grid)
- CSS grid (auto-fill, 72px columns, gap:20) for cells so row spacing is
  explicit and cannot be affected by flex layout math

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../settings/account/ProfileDecoration.tsx    | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/app/features/settings/account/ProfileDecoration.tsx b/src/app/features/settings/account/ProfileDecoration.tsx
index ab8e7fb87..f5203c734 100644
--- a/src/app/features/settings/account/ProfileDecoration.tsx
+++ b/src/app/features/settings/account/ProfileDecoration.tsx
@@ -220,26 +220,27 @@ export function ProfileDecoration() {
         )}
 
         {/* Category grid */}
-        <Box
-          direction="Column"
-          gap="300"
+        <div
           style={{
             maxHeight: 480,
             overflowY: 'auto',
+            overflowX: 'hidden',
             paddingRight: 4,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 24,
           }}
         >
           {DECORATION_CATEGORIES.map((category) => (
-            <Box key={category.id} direction="Column" gap="200">
+            <div key={category.id} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
               <Text size="L400" style={{ opacity: 0.7 }}>
                 {category.label}
               </Text>
               <div
                 style={{
-                  display: 'flex',
-                  flexWrap: 'wrap',
-                  gap: 16,
-                  padding: 4,
+                  display: 'grid',
+                  gridTemplateColumns: `repeat(auto-fill, ${CELL_SIZE}px)`,
+                  gap: 20,
                 }}
               >
                 {category.decorations.map((d) => (
@@ -252,9 +253,9 @@ export function ProfileDecoration() {
                   />
                 ))}
               </div>
-            </Box>
+            </div>
           ))}
-        </Box>
+        </div>
       </Box>
     </SettingTile>
   );