css for the card_node content to not break grid when text is really long

js/component_scripts.min.js

-/**
- * @file
- * Ckeditor Modal.
- */
-
-(function ($, Drupal) {
-  if ($.ui && $.ui.dialog) {
-    orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
-    $.ui.dialog.prototype._allowInteraction = function (event) {
-      if ($(event.target).closest('.cke_dialog').length) {
-        return true;
-      }
-      return orig_allowInteraction.apply(this, arguments);
-    };
-  }
-})(jQuery, Drupal);
-
 /**
  * @file
  */
@@ -390,6 +373,23 @@ else {
   };
 })(jQuery);
 
+/**
+ * @file
+ * Ckeditor Modal.
+ */
+
+(function ($, Drupal) {
+  if ($.ui && $.ui.dialog) {
+    orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
+    $.ui.dialog.prototype._allowInteraction = function (event) {
+      if ($(event.target).closest('.cke_dialog').length) {
+        return true;
+      }
+      return orig_allowInteraction.apply(this, arguments);
+    };
+  }
+})(jQuery, Drupal);
+
 /**
  * @file
  */

source/_patterns/00-config/01-mixins/_mixins.uw.scss

@@ -11,7 +11,17 @@ $test-color-10: #00ff58;
 $test-color-11: #3e3d12;
 $test-color-12: #f00;
 
-
+@mixin uw-no-breakout {
+  //-ms-hyphens: auto;
+  //-moz-hyphens: auto;
+  //-webkit-hyphens: auto;
+  //hyphens: auto;
+  overflow-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
+  word-wrap: break-word;
+}
 
 @mixin uw-contained-width {
   margin-left: auto;

source/_patterns/04-components/card/_card.scss

@@ -45,7 +45,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
 }
 // top
 .card__header{
-  //background: $test-color-2;
+  @include uw-no-breakout();
   color: $card-meta-color;
   margin-bottom: rem(gesso-spacing(sm));
   width: 100%;
@@ -67,6 +67,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
   }
 }
 .card__author{
+  @include uw-no-breakout();
   font-family: gesso-font-family(systemmedium);
   font-size: gesso-font-size(-1);
   a {
@@ -125,8 +126,8 @@ $card-padding: rem(gesso-spacing(sm)) !default;
 }
 // footer
 .card__footer {
+  @include uw-no-breakout();
   margin-top: auto;
-
   padding: rem(gesso-spacing(md));
   width: 100%;
 
@@ -138,7 +139,6 @@ $card-padding: rem(gesso-spacing(sm)) !default;
   }
 }
 .card__tags{
-  overflow:hidden;
   width: 100%;
 
 }

source/_patterns/04-components/card/card--node/_card--node.scss

@@ -65,19 +65,6 @@
           .card__sub-title {
             font-size: gesso-font-size(4);
           }
-
-          .card__date {
-            width: 100%;
-            @include large{
-              width: inherit;
-            }
-            .uw-date {
-              @include large{
-                width: inherit;
-              }
-            }
-          }
-
           .card__author {
             padding: gesso-spacing(xs) gesso-spacing(md);
           }
@@ -110,7 +97,6 @@
         }
         .card__date {
           margin-top: -2.25rem;
-          max-width:27rem;
           .uw-date {
           }
         }

source/_patterns/04-components/contact/_contact.scss

@@ -2,7 +2,9 @@
   .details{
     margin:0;
     &__summary{
+
       //padding: $details-padding gesso-spacing(xl) $details-padding $details-padding;
+      padding-right: rem(gesso-spacing(xl));
       text-transform: inherit;
       white-space:normal;
     }
@@ -22,7 +24,6 @@
     font-family:gesso-font-family(primary);
     font-size:rem(gesso-font-size(2));
     font-weight:400;
-    padding-right:1.5rem;
     text-decoration:none;
     text-transform: inherit;
     width:100%;

source/_patterns/04-components/date/_date.scss

@@ -5,7 +5,6 @@
   .node--type-uw-ct-event &,
   .node--type-uw-ct-blog &,
   .node--type-uw-ct-news-item &{
-    margin-left: -1rem;
     width:auto;
     @include large {
       margin-left:inherit;

source/_patterns/04-components/details/_details.scss

@@ -43,6 +43,7 @@ $details-font-family: gesso-font-family(primary);
 
 .seven-details__summary,
 .details__summary {
+  @include uw-no-breakout();
   @include svg-background(mobile-arrow-down);
   background-color: $details-background-color;
   background-position: right 1rem center; // LTR
@@ -95,6 +96,7 @@ $details-font-family: gesso-font-family(primary);
 }
 
 .details__content {
+  @include uw-no-breakout();
   background: $details-content-background-color;
   border: 1px solid $details-background-color;
   border-top: 0;

source/_patterns/04-components/page-title/_page-title.scss

@@ -4,6 +4,7 @@
   margin-bottom:0;
 }
 .page-title {
+  @include uw-no-breakout();
   margin:0;
   padding:0;