fix: improve styling of headers+lists in LMS+Studio (#34867)

Author: ihor-romaniuk

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

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,6 +112,12 @@ $headings-base-color:                       $gray-d2;
 // H3 was problematic in xblocks, we so we'll keep it as it was
 
 .xblock .xblock {
+  @for $i from 1 through $headings-count {
+    h#{$i} {
+      @extend %hd-#{$i};
+    }
+  }
+
   h2 {
     @extend %hd-2;
 

xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css

@@ -710,13 +710,15 @@
 }
 
 .xmodule_display.xmodule_ProblemBlock div.problem ul {
+    padding-left: 1em;
     margin-bottom: lh();
     margin-left: .75em;
     margin-left: .75rem;
     list-style: disc outside none;
 }
 
 .xmodule_display.xmodule_ProblemBlock div.problem ol {
+    padding-left: 1em;
     margin-bottom: lh();
     margin-left: .75em;
     margin-left: .75rem;
@@ -753,6 +755,7 @@
     margin: lh() 0;
     border-collapse: collapse;
     table-layout: auto;
+    max-width: 100%;
 }
 
 .xmodule_display.xmodule_ProblemBlock div.problem table td.cont-justified-left,
@@ -801,7 +804,7 @@
 
 .xmodule_display.xmodule_ProblemBlock div.problem code {
     margin: 0 2px;
-    padding: 0px 5px;
+    padding: 0 5px;
     border: 1px solid #eaeaea;
     border-radius: 3px;
     background-color: var(--gray-l6, #f8f8f8);
@@ -1195,11 +1198,11 @@
     color: var(--uxpl-gray-dark, #111111);
 }
 
-.xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li {
+.xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li[class*="hint-index-"] {
     color: var(--uxpl-gray-base, #414141);
 }
 
-.xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li strong {
+.xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li[class*="hint-index-"] > strong {
     color: var(--uxpl-gray-dark, #111111);
 }
 
@@ -1225,6 +1228,16 @@
     margin-bottom: calc(var(--baseline, 20px) / 4);
 }
 
+.xmodule_display.xmodule_ProblemBlock div.problem .notification li[class*="hint-index-"] ul,
+.xmodule_display.xmodule_ProblemBlock div.problem .notification li[class*="hint-index-"] ol {
+    padding: 0 0 0 1em;
+    margin-left: .75rem;
+}
+
+.xmodule_display.xmodule_ProblemBlock div.problem .notification li[class*="hint-index-"] ol {
+    list-style: decimal outside none;
+}
+
 .xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-btn-wrapper {
     float: right;
 }