fix(ui): displaying badges in alerts (#97167)

couple of issues here:

1. In UI1, displaying a `Badge` (Action required) inside `trailingItems`
of an `Alert` didn’t work (but looks fine in UI2):

<img width="919" height="347" alt="Screenshot 2025-08-05 at 15 04 15"
src="https://github.com/user-attachments/assets/ec93e97b-bda1-46c1-ae18-4141ebebf5b9"
/>

2. Buttons with size `xs` inside an `Alert` made the text misaligned
with the leading icon in UI2, so I changed it to size `zero` in the
stories.

3. The `Action Required` Badge inside the Alert wasn’t vertically
centered. 2 and 3 can be observed here:

<img width="919" height="347" alt="Screenshot 2025-08-05 at 15 04 56"
src="https://github.com/user-attachments/assets/e7076c7c-466b-4803-a806-4412f9c37afb"
/>

---

Fixed versions:

<img width="919" height="347" alt="Screenshot 2025-08-05 at 14 50 33"
src="https://github.com/user-attachments/assets/d8c58148-7c1b-4f26-9ccf-fcbde27c05d0"
/>
<img width="919" height="347" alt="Screenshot 2025-08-05 at 14 50 27"
src="https://github.com/user-attachments/assets/50462701-9091-4acb-91ef-f09511d4a26b"
/>

Author: TkDodo

static/app/components/core/alert/index.mdx

@@ -14,7 +14,9 @@ resources:
 
 import {Alert} from 'sentry/components/core/alert';
 import {AlertLink} from 'sentry/components/core/alert/alertLink';
+import {Badge} from 'sentry/components/core/badge';
 import {Button} from 'sentry/components/core/button';
+import {Flex} from 'sentry/components/core/layout';
 import {IconAdd, IconDelete, IconEdit, IconMail} from 'sentry/icons';
 import * as Storybook from 'sentry/stories';
 
@@ -167,31 +169,24 @@ You can control the initial expansion state of alerts with the `defaultExpanded`
 
 ### Trailing Items
 
-Add interactive elements like buttons or links to the right side of alerts using the `trailingItems` prop.
+Add interactive elements like buttons, links or badges to the right side of alerts using the `trailingItems` prop.
 
 <Storybook.Demo>
   <Alert.Container>
-    <Alert
-      type="info"
-      trailingItems={
-        <Button size="xs" priority="primary">
-          Take Action
-        </Button>
-      }
-    >
-      This alert has a trailing action button
+    <Alert type="info" trailingItems={<Badge type="warning">Action Required</Badge>}>
+      This alert has a trailing bagde
     </Alert>
     <Alert
       type="error"
       trailingItems={
-        <div>
-          <Button size="xs" priority="danger" icon={<IconDelete />}>
+        <Flex gap="sm">
+          <Button size="zero" priority="danger" icon={<IconDelete />}>
             Delete
           </Button>
-          <Button size="xs" priority="muted" icon={<IconEdit />}>
+          <Button size="zero" priority="muted" icon={<IconEdit />}>
             Edit
           </Button>
-        </div>
+        </Flex>
       }
     >
       This alert has multiple trailing actions
@@ -203,24 +198,24 @@ Add interactive elements like buttons or links to the right side of alerts using
   <Alert
     type="info"
     trailingItems={
-      <Button size="xs" priority="primary">
+      <Button size="zero" priority="primary">
         Take Action
       </Button>
     }
   >
-    This alert has a trailing action button
+    This alert has a trailing badge
   </Alert>
   <Alert
     type="error"
     trailingItems={
-      <div>
-        <Button size="xs" priority="danger" icon={<IconDelete />}>
+      <Flex gap="sm">
+        <Button size="zero" priority="danger" icon={<IconDelete />}>
           Delete
         </Button>
-        <Button size="xs" priority="muted" icon={<IconEdit />}>
+        <Button size="zero" priority="muted" icon={<IconEdit />}>
           Edit
         </Button>
-      </div>
+      </Flex>
     }
   >
     This alert has multiple trailing actions

static/app/components/core/alert/index.tsx

@@ -169,12 +169,12 @@ function getAlertColors(theme: Theme, type: NonNullable<AlertProps['type']>) {
 
 function getAlertGridLayout(p: AlertProps) {
   if (p.showIcon) {
-    return `min-content 1fr ${p.trailingItems ? 'min-content' : ''} ${
+    return `min-content 1fr ${p.trailingItems ? 'auto' : ''} ${
       p.expand ? 'min-content' : ''
     }`;
   }
 
-  return `1fr ${p.trailingItems ? 'min-content' : ''} ${p.expand ? 'min-content' : ''}`;
+  return `1fr ${p.trailingItems ? 'auto' : ''} ${p.expand ? 'min-content' : ''}`;
 }
 
 const AlertPanel = styled('div')<AlertProps & {hovered: boolean}>`