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);