Improve RiverBreakout spacing (#768)

primer · Sep 26, 2024 · 0270f06 · 0270f06
1 parent d10dc53
commit 0270f06
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/.changeset/lovely-rocks-bathe.md b/.changeset/lovely-rocks-bathe.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Improves spacing of RiverBreakout content
diff --git a/packages/react/src/river/river-shared.module.css b/packages/react/src/river/river-shared.module.css
@@ -166,6 +166,10 @@
   width: 1px;
 }
 
+.RiverBreakout .River__call-to-action {
+  margin-block-end: var(--base-size-40);
+}
+
 @media screen and (min-width: 48rem) {
   .RiverBreakout .River__content {
     display: grid;
@@ -174,20 +178,21 @@
       'text trailingComponent'
       'cta trailingComponent';
     grid-template-columns: 5fr 3fr;
+    grid-auto-rows: auto 1fr;
+  }
+
+  .RiverBreakout .River__text {
+    grid-area: text;
   }
 
   .RiverBreakout .River__call-to-action {
     grid-area: cta;
-    margin-block-start: 0;
+    margin-block: 0;
   }
 
   .RiverBreakout .River__trailingComponent {
     grid-area: trailingComponent;
     justify-self: end;
     margin-block-start: 0;
   }
-
-  .RiverBreakout .River__text {
-    grid-area: text;
-  }
 }