left aligned buttons to text content on article pages (#7813)

* left aligned buttons to text content on article pages * buttons now wrapping if text is long Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org>
MozillaFoundation · Nov 9, 2021 · e0716fc · e0716fc
1 parent b4d04d1
commit e0716fc
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/source/sass/buttons.scss b/source/sass/buttons.scss
@@ -3,7 +3,7 @@ button,
 .btn {
   font-family: "Nunito Sans";
   font-weight: $btn-font-weight;
-  white-space: nowrap;
+  white-space: normal;
 
   @include set-text-size(18px, 22px);
 

diff --git a/source/sass/wagtail/blocks/article-blocks.scss b/source/sass/wagtail/blocks/article-blocks.scss
@@ -105,3 +105,12 @@
     position: relative;
   }
 }
+
+// left-aligning link button streamfields to text content
+// since text content is 8-col instead of 10 like the available streamfields.
+.article-page-content {
+  .linkbutton-block .streamfield-content {
+    @extend .col-md-8;
+    padding-left: 12px;
+  }
+}
diff --git a/source/sass/wagtail/blocks/link-button.scss b/source/sass/wagtail/blocks/link-button.scss
@@ -2,5 +2,6 @@
 
 .link-button {
   display: block;
-  width: max-content;
+  width: 100%;
+  max-width: max-content;
 }