Merge pull request #9773 from circleci/fix/code-block-in-block-formatting

Fix formatting bugs for code in blocks

Author: rosieyohannan

ui/src/css/doc.css

@@ -199,7 +199,7 @@
 .doc p code,
 .doc thead code,
 .doc .colist > table code,
-.doc .admonitionblock td.content code {
+.doc .admonitionblock td.content code:not(.hljs) {
   color: var(--code-font-color);
   background: #F7F7F7;
   border-radius: 4px;
@@ -209,6 +209,13 @@
   white-space: nowrap;
 }
 
+/* Allow inline code to wrap in admonition blocks to prevent overflow */
+.doc .admonitionblock td.content code:not(.hljs) {
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
 .doc code,
 .doc pre {
   hyphens: none;
@@ -970,19 +977,13 @@
   margin-top: 0;
 }
 
-/* Fix wrapping issues inside sidebarblocks */
-.doc .sidebarblock code {
+/* Fix wrapping issues inside sidebarblocks - only for inline code, not code blocks */
+.doc .sidebarblock code:not(.hljs) {
   white-space: normal;
   word-break: break-word;
   overflow-wrap: break-word;
 }
 
-.doc .sidebarblock .listingblock pre {
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-wrap: break-word;
-}
-
 .doc .sidebarblock .listingblock {
   width: 100%;
   max-width: 100%;
@@ -1460,11 +1461,11 @@
   font-weight: var(--heading-font-weight);
 }
 
-/* Prevent inline code text from wrapping in table cells */
-td .pre,
-td .code,
-td p code,
-td li code,
+/* Prevent inline code text from wrapping in table cells (but not in admonition blocks) */
+.tableblock td .pre,
+.tableblock td .code,
+.tableblock td p code,
+.tableblock td li code,
 .tableblock p code,
 .tableblock li code {
   white-space: nowrap !important;