fix Banner spacing (#6190)

Author: llastflowers

.changeset/big-hairs-agree.md

@@ -121,6 +121,10 @@
   margin-inline-start: var(--base-size-4);
 }
 
+:where(.Banner):has(.BannerActions) .BannerDismiss {
+  margin-block: var(--base-size-2);
+}
+
 .BannerDismiss svg {
   /* stylelint-disable-next-line primer/colors */
   color: var(--banner-icon-fgColor);
@@ -132,6 +136,7 @@
   display: flex;
   column-gap: var(--base-size-12);
   align-items: center;
+  margin-block: var(--base-size-2);
 }
 
 .BannerActions :where([data-primary-action='trailing']) {
@@ -189,6 +194,12 @@
     grid-template-columns: auto auto;
   }
 
+  :where(.Banner):not([data-dismissible])
+    :where(.BannerActionsContainer[data-primary-action='trailing'])
+    :where([data-variant='link']:only-child) {
+    padding-inline: 0 var(--base-size-12);
+  }
+
   .BannerActions [data-primary-action='trailing'] {
     display: flex;
     min-height: var(--base-size-32, 2rem);

.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-colorblind-linux.png

@@ -63,8 +63,7 @@ export const Playground: StoryObj<typeof Banner> = {
   },
   args: {
     title: 'Banner title',
-    description:
-      'GitHub users are now required to en able two-factor authentication as an additional security measure.',
+    description: 'GitHub users are now required to enable two-factor authentication as an additional security measure.',
     variant: 'info',
   },
   argTypes: {