Fix feature table overlap in spanish #170433148 (#1308)

* wider feature-row title divs widen feature-row title divs to account for long words in non-English languages * pull in compiled CSS from pattern-library pulls in compiled CSS covered by commit SFDigitalServices/sf-dahlia-pattern-library@18cfda7 * apply new utility class to feature titles applies new utility class that uses overflow-wrap: break-word to ensure we're covered even with edge cases (i.e. long words, viewports 768-830ish)
SFDigitalServices · Jan 29, 2020 · b469eb8 · b469eb8
1 parent 6e32d60
commit b469eb8
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/app/assets/javascripts/listings/directives/feature-row.html.slim b/app/assets/javascripts/listings/directives/feature-row.html.slim
@@ -1,5 +1,5 @@
 .feature-row.row.collapse ng-if="description"
-  .medium-3.columns.padding-right--half
+  .medium-4.columns.padding-right--half.overflow-wrap-break-word
     h4.feature-title translate="{{title}}"
-  .medium-9.columns ng-class="{skiptranslate: skiptranslate}"
+  .medium-8.columns ng-class="{skiptranslate: skiptranslate}"
     p.feature-tile_content.t-small ng-bind-html="description | nl2br"
diff --git a/app/assets/stylesheets/toolkit.scss b/app/assets/stylesheets/toolkit.scss