Fix Banner styling for custom action buttons (#2260)

## Summary:
Fixing styling issue where non-tertiary buttons get cropped when used as a custom action in the banner component.

Issue: WB-1716

## Test plan:
- Confirm buttons look as expected in the banner (`?path=/story/packages-banner--with-custom-action-primary`)
- Confirm a mix of actions and custom actions look as expected in the banner (`?path=/story/packages-banner--with-mixed-actions`)

## Screenshots:
Mixed actions (before & after changes)
<img width="1726" alt="before-mixed" src="https://github.com/Khan/wonder-blocks/assets/14334617/360e8945-de62-48aa-b259-e5049ad3a33e">
<img width="1728" alt="after-mixed" src="https://github.com/Khan/wonder-blocks/assets/14334617/7f506d9b-c379-4cd9-adf6-4e61a6ee1d58">

Primary button for custom action (before & after changes) 
<img width="1728" alt="before-primary" src="https://github.com/Khan/wonder-blocks/assets/14334617/0d3a859c-a110-4433-b1eb-e9dfe28af6e7">
<img width="1726" alt="after-primary" src="https://github.com/Khan/wonder-blocks/assets/14334617/508f6b86-6c4d-4af6-9025-1b00fba9bbb4">

Author: beaesguerra

Reviewers: jandrade, beaesguerra, jeresig

Required Reviewers:

Approved By: jeresig

Checks: ✅ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), 🚫 Chromatic - Get results on regular PRs, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), 🚫 Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x)

Pull Request URL: #2260

.changeset/new-rice-punch.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-banner": patch
+---
+
+Banner: Fix styling issue where buttons are cropped when used as a custom action

__docs__/wonder-blocks-banner/banner.stories.tsx

@@ -430,6 +430,31 @@ export const WithCustomAction: StoryComponentType = {
     ),
 };
 
+/**
+ * **NOTE: Custom actions are discouraged and should only be used as a last resort!**.
+ *
+ * Another example with a custom action using a primary button.
+ * See **With Custom Action** story for more details.
+ */
+export const WithCustomActionPrimary: StoryComponentType = {
+    render: () => (
+        <Banner
+            text="some text"
+            layout="floating"
+            actions={[
+                {
+                    type: "custom",
+                    node: (
+                        <Button size="small" onClick={() => {}}>
+                            Custom Action
+                        </Button>
+                    ),
+                },
+            ]}
+        />
+    ),
+};
+
 /**
  * Here is an example that includes both a normal action and a custom action.
  */
@@ -452,6 +477,14 @@ export const WithMixedActions: StoryComponentType = {
                         </Button>
                     ),
                 },
+                {
+                    type: "custom",
+                    node: (
+                        <Button size="small" onClick={() => {}}>
+                            Custom button 2
+                        </Button>
+                    ),
+                },
                 {
                     type: "custom",
                     node: (

packages/wonder-blocks-banner/src/components/banner.tsx

@@ -349,13 +349,14 @@ const styles = StyleSheet.create({
         justifyContent: "flex-start",
         marginTop: spacing.xSmall_8,
         marginBottom: spacing.xSmall_8,
+        // Set the height to remove the padding from buttons
+        height: 18,
+        alignItems: "center",
     },
     action: {
         marginLeft: spacing.xSmall_8,
         marginRight: spacing.xSmall_8,
         justifyContent: "center",
-        // Set the height to remove the padding from buttons
-        height: 18,
     },
     link: {
         fontSize: 14,