Merge pull request #1600 from OpenTechFund/fix/tables-long-lines-fit-layout

Make big tables and long links etc fit within the layout

opentech/static_src/src/javascript/apply/submission-text-cleanup.js

@@ -2,13 +2,14 @@
 
     'use strict';
 
-    $('p').each(function () {
+    $('.rich-text--answers').find('p').each(function () {
         // Detach (remove) p tag with only whitespace inside.
         if ($.trim($(this).text()) === '') {
             $(this).detach();
         }
     });
 
+    // Wrap all tables in a div so overflow auto works.
+    $('.rich-text--answers').find('table').wrap('<div class="rich-text__table"></div>');
 
 })(jQuery);
-

opentech/static_src/src/sass/apply/abstracts/_variables.scss

@@ -95,6 +95,9 @@ $site-width: 1280px;
 $wrapper--medium: 1020px;
 $wrapper--small: 790px;
 
+// Text line length
+$max-text-line-length: 50em;
+
 // Breakpoints
 $breakpoints: (
     'mob-portrait'      '(min-width: 320px)',

opentech/static_src/src/sass/apply/components/_feed.scss

@@ -142,6 +142,11 @@
         }
     }
 
+    &__comment {
+        word-break: break-word;
+        max-width: $max-text-line-length;
+    }
+
     &__related-item {
         svg {
             width: 10px;

opentech/static_src/src/sass/apply/components/_rich-text.scss

 .rich-text {
     margin-bottom: 2rem;
     word-break: break-word;
+    max-width: $max-text-line-length;
 
     &--answers {
         > section {
@@ -46,6 +47,10 @@
         }
     }
 
+    &__table {
+        overflow: auto;
+    }
+
     a {
         font-weight: $weight--bold;
         border-bottom: 1px solid transparent;