From 2554828db82e082ea6c83f910e477f31b9f7f18c Mon Sep 17 00:00:00 2001
From: Rajat Talesra <rajat@forem.com>
Date: Tue, 9 May 2023 12:12:52 +0530
Subject: [PATCH] Design fixes for home feed comments (#19437)

* Design fixes for feed comments

* Nit fix

* Nit fixes

* Nit fix

* Nit fix

* Nit fix
---
 .../stylesheets/components/comments.scss      | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/comments.scss b/app/assets/stylesheets/components/comments.scss
index 696a934ce..9e138c02e 100644
--- a/app/assets/stylesheets/components/comments.scss
+++ b/app/assets/stylesheets/components/comments.scss
@@ -25,12 +25,16 @@
 
   &__body {
     padding-left: var(--su-7);
-    width: 100%;
+    width: calc(100% - var(--su-7));
     background: var(--card-tertiary-bg);
     &:hover {
       background: var(--card-tertiary-bg-hover);
     }
 
+    @media (min-width: $breakpoint-m) {
+      width: calc(100% - var(--su-7));
+    }
+
     border-radius: var(--radius);
     padding: var(--su-4);
     padding-bottom: var(--su-1);
@@ -45,9 +49,15 @@
       .c-embed__body {
         font-size: var(--fs-s);
       }
+      div
+        :not(.crayons-comment__readmore)
+        :not(.highlight__panel-action)
+        :not(.highlight__panel)
+        :not(.highlight) {
+        background: var(--card-secondary-bg);
+      }
       div:not(.crayons-comment__readmore) {
         margin-bottom: var(--su-3);
-        background: var(--card-secondary-bg);
       }
       .liquid-comment .body {
         :not(:first-child) {
@@ -62,6 +72,12 @@
         border-left: 4px solid var(--base-20);
         padding-left: var(--su-2);
       }
+      pre:not(.highlight),
+      div.highlight,
+      li pre.highlight,
+      blockquote pre.highlight {
+        padding: var(--su-2);
+      }
     }
     .crayons-comment__readmore {
       color: var(--base-80);