From 521f7987ef7f3de3539339b734dcaf2e9abe6766 Mon Sep 17 00:00:00 2001
From: ihor-romaniuk <ihor.romaniuk@raccoongang.com>
Date: Wed, 29 May 2024 10:52:01 +0200
Subject: [PATCH] fix: problem editor content style

---
 cms/static/sass/xmodule/_headings.scss |  6 ++----
 lms/static/sass/base/_headings.scss    | 11 +++++++----
 xmodule/assets/capa/_display.scss      | 25 ++++++++++++++++++++-----
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/cms/static/sass/xmodule/_headings.scss b/cms/static/sass/xmodule/_headings.scss
index 07ae25606db4..a24681fc81e7 100644
--- a/cms/static/sass/xmodule/_headings.scss
+++ b/cms/static/sass/xmodule/_headings.scss
@@ -41,7 +41,7 @@ $headings-base-color:                       $gray-d2;
 %hd-3 {
   margin-bottom: ($baseline / 2);
   font-size: 1.35em;
-  font-weight: $headings-font-weight-normal;
+  font-weight: $headings-font-weight-bold;
   line-height: 1.4em;
 }
 
@@ -105,15 +105,13 @@ $headings-base-color:                       $gray-d2;
   // ----------------------------
   // canned heading classes
   @for $i from 1 through $headings-count {
+    h#{$i},
     .hd-#{$i} {
       @extend %hd-#{$i};
     }
   }
 
   h3 {
-    @extend %hd-2;
-
-    font-weight: $headings-font-weight-normal;
     // override external modules and xblocks that use inline CSS
     text-transform: initial;
   }
diff --git a/lms/static/sass/base/_headings.scss b/lms/static/sass/base/_headings.scss
index 52668327cf98..343f6dd8a4cb 100644
--- a/lms/static/sass/base/_headings.scss
+++ b/lms/static/sass/base/_headings.scss
@@ -41,7 +41,7 @@ $headings-base-color:                       $gray-d2;
 %hd-3 {
   margin-bottom: ($baseline / 2);
   font-size: 1.35em;
-  font-weight: $headings-font-weight-normal;
+  font-weight: $headings-font-weight-bold;
   line-height: 1.4em;
 }
 
@@ -112,10 +112,13 @@ $headings-base-color:                       $gray-d2;
 // H3 was problematic in xblocks, we so we'll keep it as it was
 
 .xblock .xblock {
-  h2 {
-    @extend %hd-2;
+  @for $i from 1 through $headings-count {
+    h#{$i} {
+      @extend %hd-#{$i};
+    }
+  }
 
-    font-weight: $headings-font-weight-bold;
+  h2 {
     // override external modules and xblocks that use inline CSS
     text-transform: initial;
 
diff --git a/xmodule/assets/capa/_display.scss b/xmodule/assets/capa/_display.scss
index 15571b65dc30..969a65ae17f8 100644
--- a/xmodule/assets/capa/_display.scss
+++ b/xmodule/assets/capa/_display.scss
@@ -572,10 +572,10 @@ div.problem {
       }
 
       .grading {
-        margin: 0px 7px 0 0;
+        margin: 0 7px 0 0;
         padding-left: 25px;
         background: url('#{$static-path}/images/info-icon.png') left center no-repeat;
-        text-indent: 0px;
+        text-indent: 0;
       }
 
       p {
@@ -646,7 +646,7 @@ div.problem {
     }
 
     .submit-message-container {
-      margin: $baseline 0px ;
+      margin: $baseline 0;
     }
   }
 
@@ -657,6 +657,7 @@ div.problem {
   }
 
   ul {
+    padding-left: 1em;
     margin-bottom: lh();
     margin-left: .75em;
     margin-left: .75rem;
@@ -664,6 +665,7 @@ div.problem {
   }
 
   ol {
+    padding-left: 1em;
     margin-bottom: lh();
     margin-left: .75em;
     margin-left: .75rem;
@@ -705,6 +707,8 @@ div.problem {
     margin: lh() 0;
     border-collapse: collapse;
     table-layout: auto;
+    max-width: 100%;
+    border: 1px solid;
 
     td, th {
       &.cont-justified-left {
@@ -745,6 +749,7 @@ div.problem {
 
     tr, td, th {
       vertical-align: middle;
+      border: 1px solid;
     }
   }
 
@@ -1155,10 +1160,10 @@ div.problem {
         color: $uxpl-gray-dark;
       }
 
-      li {
+      li[class*="hint-index-"] {
         color: $uxpl-gray-base;
 
-        strong {
+        & > strong {
           color: $uxpl-gray-dark;
         }
       }
@@ -1187,6 +1192,16 @@ div.problem {
           margin-bottom: $baseline / 4;
         }
       }
+
+      li[class*="hint-index-"] ul,
+      li[class*="hint-index-"] ol {
+        padding: 0 0 0 1em;
+        margin-left: .75rem;
+      }
+
+      li[class*="hint-index-"] ol {
+        list-style: decimal outside none;
+      }
     }
 
     .notification-btn-wrapper {