From 1d7cb0bbc3bc15ef3b77867661820c26e9d18922 Mon Sep 17 00:00:00 2001
From: vineyardbovines <spencerfpope@gmail.com>
Date: Wed, 22 Apr 2026 10:55:11 -0400
Subject: [PATCH] fix(gifPicker): give category pills a solid background

The pills row lives inside the sticky header but had a transparent
background, so scrolling GIFs showed through the pills. Add a bg and
replace the trailing margin with padding so the background extends
across the gap before the grid content.

Addresses PR #10261 feedback from surfdude29: category icons appear
to float over the GIFs on scroll.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/features/gifPicker/components/GifCategoryPills.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/features/gifPicker/components/GifCategoryPills.tsx b/src/features/gifPicker/components/GifCategoryPills.tsx
index d11aa25b53..89033bf51f 100644
--- a/src/features/gifPicker/components/GifCategoryPills.tsx
+++ b/src/features/gifPicker/components/GifCategoryPills.tsx
@@ -3,7 +3,7 @@ import {type MessageDescriptor} from '@lingui/core'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react/macro'
 
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {Celebrate_Stroke2_Corner0_Rounded as Celebrate} from '#/components/icons/Celebrate'
 import {Clock_Stroke2_Corner0_Rounded as Clock} from '#/components/icons/Clock'
@@ -48,6 +48,7 @@ export function GifCategoryPills({
   hasRecents: boolean
 }) {
   const {i18n} = useLingui()
+  const t = useTheme()
 
   return (
     <View
@@ -56,7 +57,8 @@ export function GifCategoryPills({
         a.justify_between,
         a.align_center,
         a.gap_xs,
-        a.mb_md,
+        a.pb_md,
+        t.atoms.bg,
       ]}>
       {GIF_CATEGORIES.map(category => {
         if (category.id === 'recents' && !hasRecents) return null