[deploy] Adjust overflow in comments and revert inline css (#7799)

* Adjust overflow in comments and revert inline css

* Fix color

app/assets/stylesheets/components/comments.scss

@@ -16,19 +16,34 @@
   &__body {
     margin-top: calc(var(--su-1) * -1);
     padding-left: var(--su-7);
+    padding-bottom: var(--su-2);
+    max-height:330px;
+    overflow: hidden;
 
     a:hover {
       text-decoration: underline; //todo: default for all in-content links
     }
 
-    p {
+    p, div.highlight {
+      margin: 6px auto;
+    }
+
+    * {
       display: -webkit-box;
-      -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
+      max-width: 100%;
+      width: auto;
+      object-fit: contain; 
     }
   }
 
+  &__footer {
+    box-shadow: 0px 0px var(--su-2) var(--su-2) var(--story-comments-bg);
+    z-index: 5;
+    position: relative;
+  }
+
   & + & {
     margin-top: var(--su-4);
   }

app/assets/stylesheets/components/stories.scss

@@ -174,7 +174,8 @@
 
     &__actions {
       padding-left: calc(var(--su-6) + var(--su-4));
-      padding-top: var(--su-4);
+      z-index: 6;
+      position:relative;
     }
   }
 

app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap

@@ -1285,6 +1285,9 @@ exports[`<Article /> component should render as saved on reading list 1`] = `
             }
           }
         />
+        <div
+          class="crayons-comment__footer"
+        />
       </div>
       <div
         class="crayons-story__comments__actions"
@@ -2086,6 +2089,9 @@ exports[`<Article /> component should render with comments 1`] = `
             }
           }
         />
+        <div
+          class="crayons-comment__footer"
+        />
       </div>
       <div
         class="crayons-story__comments__actions"

app/javascript/articles/components/CommentListItem.jsx

@@ -46,6 +46,7 @@ export const CommentListItem = ({ comment }) => (
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: comment.safe_processed_html }}
     />
+    <div className="crayons-comment__footer" />
   </div>
 );
 

app/javascript/articles/components/__tests__/__snapshots__/CommentsList.test.jsx.snap

@@ -46,6 +46,9 @@ exports[`<CommentsList /> should not render "See all comments" button when there
         }
       }
     />
+    <div
+      class="crayons-comment__footer"
+    />
   </div>
   <div
     class="crayons-comment pl-2 cursor-pointer"
@@ -89,6 +92,9 @@ exports[`<CommentsList /> should not render "See all comments" button when there
         }
       }
     />
+    <div
+      class="crayons-comment__footer"
+    />
   </div>
 </div>
 `;
@@ -139,6 +145,9 @@ exports[`<CommentsList /> should not render "See all comments" button when there
         }
       }
     />
+    <div
+      class="crayons-comment__footer"
+    />
   </div>
 </div>
 `;
@@ -193,6 +202,9 @@ exports[`<CommentsList /> should render "See all comments" button when there are
         }
       }
     />
+    <div
+      class="crayons-comment__footer"
+    />
   </div>
   <div
     class="crayons-comment pl-2 cursor-pointer"
@@ -236,6 +248,9 @@ exports[`<CommentsList /> should render "See all comments" button when there are
         }
       }
     />
+    <div
+      class="crayons-comment__footer"
+    />
   </div>
   <div
     class="crayons-story__comments__actions"
@@ -296,6 +311,9 @@ exports[`<CommentsList /> should render comments 1`] = `
         }
       }
     />
+    <div
+      class="crayons-comment__footer"
+    />
   </div>
   <div
     class="crayons-comment pl-2 cursor-pointer"
@@ -339,6 +357,9 @@ exports[`<CommentsList /> should render comments 1`] = `
         }
       }
     />
+    <div
+      class="crayons-comment__footer"
+    />
   </div>
   <div
     class="crayons-story__comments__actions"

app/views/articles/index.html.erb

@@ -24,14 +24,6 @@
   <%= auto_discovery_link_tag(:rss, app_url("feed"), title: "#{community_name} RSS Feed") %>
 <% end %>
 
-<% cache "included-crayons_#{ApplicationConfig['HEROKU_SLUG_COMMIT']}", expires_in: 8.hours do %>
-  <%# This is a temporary inclusion of crayons on the page while new styles may not be included in shell %>
-  <%# provides redundency to make sure new styles are included during major transition %>
-  <style>
-    <% Rails.application.config.assets.compile = true %>
-    <%= Rails.application.assets["crayons.css"].to_s.html_safe %>
-  </style>
-<% end %>
 <%= javascript_packs_with_chunks_tag "homePage", defer: true %>
 
 <% cache(cache_key_heroku_slug("main-stories-index-#{params}-#{user_signed_in?}"), expires_in: 90.seconds) do %>