2 files changed, 37 insertions, 34 deletions

diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css
index e3017ae962..5a7b9955e7 100644
--- a/web_src/css/markup/codecopy.css
+++ b/web_src/css/markup/codecopy.css
@@ -1,8 +1,3 @@
-.markup .code-block,
-.markup .mermaid-block {
-  position: relative;
-}
-
 .markup .code-copy {
   position: absolute;
   top: 8px;
@@ -28,8 +23,8 @@
   background: var(--color-secondary-dark-1) !important;
 }
 
-.markup .code-block:hover .code-copy,
-.markup .mermaid-block:hover .code-copy {
+.markup .code-block-container:hover .code-copy,
+.markup .code-block:hover .code-copy {
   visibility: visible;
   animation: fadein 0.2s both;
 }
diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
index 937224a9d7..c6a89edf25 100644
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@@ -2,7 +2,7 @@
   overflow: hidden;
   font-size: 16px;
   line-height: 1.5 !important;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
 }
 
 .markup > *:first-child {
@@ -134,6 +134,13 @@
   margin-bottom: 16px;
 }
 
+/* override p:last-child from base.css.
+Fomantic assumes that <p>/<hX> elements only have margins between elements, but not for the first's top or last's bottom.
+In markup content, we always use bottom margin for all elements */
+.markup p:last-child {
+  margin-bottom: 16px;
+}
+
 .markup hr {
   height: 4px;
   padding: 0;
@@ -309,10 +316,18 @@
   box-sizing: initial;
 }
 
+.file-view.markup {
+  padding: 1em 2em;
+}
+
+.file-view.markup:has(.file-not-rendered-prompt) {
+  padding: 0; /* let the file-not-rendered-prompt layout itself */
+}
+
 /* this background ensures images can break <hr>. We can only do this on
    cases where the background is known and not transparent. */
-.markup.file-view img,
-.markup.file-view video,
+.file-view.markup img,
+.file-view.markup video,
 .comment-body .markup img, /* regular comment */
 .comment-body .markup video,
 .comment-content .markup img, /* code comment */
@@ -443,13 +458,25 @@
 }
 
 .markup pre > code {
-  padding: 0;
-  margin: 0;
   font-size: 100%;
+}
+
+.markup .code-block,
+.markup .code-block-container {
+  position: relative;
+}
+
+.markup .code-block-container.code-overflow-wrap pre > code {
   white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  background: transparent;
-  border: 0;
+}
+
+.markup .code-block-container.code-overflow-scroll pre {
+  overflow-x: auto;
+}
+
+.markup .code-block-container.code-overflow-scroll pre > code {
+  white-space: pre;
+  overflow-wrap: normal;
 }
 
 .markup .highlight {
@@ -470,16 +497,11 @@
   word-break: normal;
 }
 
-.markup pre {
-  word-wrap: normal;
-}
-
 .markup pre code,
 .markup pre tt {
   display: inline;
   padding: 0;
   line-height: inherit;
-  word-wrap: normal;
   background-color: transparent;
   border: 0;
 }
@@ -522,20 +544,6 @@
   margin: 0 0.25em;
 }
 
-.file-revisions-btn {
-  display: block;
-  float: left;
-  margin-bottom: 2px !important;
-  padding: 11px !important;
-  margin-right: 10px !important;
-}
-
-.file-revisions-btn i {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
 .markup-content-iframe {
   display: block;
   border: none;