From 49a438f4ec6f188db2a4a7024f5d3d3cf4de811b Mon Sep 17 00:00:00 2001
From: Ben Halpern <bendhalpern@gmail.com>
Date: Tue, 12 May 2020 12:42:49 -0400
Subject: [PATCH] [deploy] Adjust overflow in comments and revert inline css
 (#7799)

* Adjust overflow in comments and revert inline css

* Fix color
---
 .../stylesheets/components/comments.scss      | 19 +++++++++++++++--
 .../stylesheets/components/stories.scss       |  3 ++-
 .../__snapshots__/Article.test.jsx.snap       |  6 ++++++
 .../articles/components/CommentListItem.jsx   |  1 +
 .../__snapshots__/CommentsList.test.jsx.snap  | 21 +++++++++++++++++++
 app/views/articles/index.html.erb             |  8 -------
 6 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/components/comments.scss b/app/assets/stylesheets/components/comments.scss
index c3b4d9c3b..286293d49 100644
--- a/app/assets/stylesheets/components/comments.scss
+++ b/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);
   }
diff --git a/app/assets/stylesheets/components/stories.scss b/app/assets/stylesheets/components/stories.scss
index e56e4c4db..fc3aa5b21 100644
--- a/app/assets/stylesheets/components/stories.scss
+++ b/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;
     }
   }
 
diff --git a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
index d5fa32116..4363122b4 100644
--- a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
+++ b/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"
diff --git a/app/javascript/articles/components/CommentListItem.jsx b/app/javascript/articles/components/CommentListItem.jsx
index 7a24e7212..72a5cea3d 100644
--- a/app/javascript/articles/components/CommentListItem.jsx
+++ b/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>
 );
 
diff --git a/app/javascript/articles/components/__tests__/__snapshots__/CommentsList.test.jsx.snap b/app/javascript/articles/components/__tests__/__snapshots__/CommentsList.test.jsx.snap
index 1ef63bd14..260c60832 100644
--- a/app/javascript/articles/components/__tests__/__snapshots__/CommentsList.test.jsx.snap
+++ b/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"
diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb
index 7e8c9856c..b6d26696f 100644
--- a/app/views/articles/index.html.erb
+++ b/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 %>