style(feedback): add gap back to mailbox (#93761)

only for chonk theme.

before:
<img width="352" alt="SCR-20250617-msgl"
src="https://github.com/user-attachments/assets/74a66418-ae25-4011-988a-24d6cc393a2f"
/>

after:
<img width="258" alt="SCR-20250617-nbzd"
src="https://github.com/user-attachments/assets/0a4d033e-f3c5-459b-8cfc-fcaa7fafd56d"
/>

Author: michellewzhang

static/app/components/feedback/list/mailboxPicker.tsx

@@ -1,10 +1,13 @@
+import {useTheme} from '@emotion/react';
+
 import {Badge} from 'sentry/components/core/badge';
 import {Flex} from 'sentry/components/core/layout';
 import {SegmentedControl} from 'sentry/components/core/segmentedControl';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import type decodeMailbox from 'sentry/components/feedback/decodeMailbox';
 import useMailboxCounts from 'sentry/components/feedback/list/useMailboxCounts';
 import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
 import useOrganization from 'sentry/utils/useOrganization';
 
 type Mailbox = ReturnType<typeof decodeMailbox>;
@@ -23,6 +26,7 @@ const MAILBOXES = [
 export default function MailboxPicker({onChange, value}: Props) {
   const organization = useOrganization();
   const {data} = useMailboxCounts({organization});
+  const theme = useTheme();
 
   const filteredMailboxes = MAILBOXES;
 
@@ -34,17 +38,17 @@ export default function MailboxPicker({onChange, value}: Props) {
         value={value}
         onChange={onChange}
       >
-        {filteredMailboxes.map(c => {
+        {filteredMailboxes.map(mailbox => {
           // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-          const count = data?.[c.key];
+          const count = data?.[mailbox.key];
           const display = count && count >= 100 ? '99+' : count;
           const title =
             count === 1 ? t('1 unassigned item') : t('%s unassigned items', display);
           return (
-            <SegmentedControl.Item key={c.key} aria-label={c.label}>
+            <SegmentedControl.Item key={mailbox.key} aria-label={mailbox.label}>
               <Tooltip disabled={!count} title={title}>
-                <Flex align="center">
-                  {c.label}
+                <Flex align="center" gap={theme.isChonk ? space(0.75) : 0}>
+                  {mailbox.label}
                   {display ? <Badge type="default">{display}</Badge> : null}
                 </Flex>
               </Tooltip>