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

@@ -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