From dc24c3393023e1dac6b6ee8100f7efd06342a80a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Kruli=C5=A1?= <krulis@d3s.mff.cuni.cz>
Date: Sun, 15 Dec 2024 19:51:23 +0100
Subject: [PATCH] Improving appearance of markdown input fields and their
 previews.

---
 .../forms/Fields/MarkdownTextAreaField.js     | 20 +++++++------------
 .../forms/Fields/MarkdownTextAreaField.less   | 11 +++++++++-
 .../SourceCodeViewer/SourceCodeViewer.css     |  7 ++++++-
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/forms/Fields/MarkdownTextAreaField.js b/src/components/forms/Fields/MarkdownTextAreaField.js
index 7330b3cdb..1862a9bc9 100644
--- a/src/components/forms/Fields/MarkdownTextAreaField.js
+++ b/src/components/forms/Fields/MarkdownTextAreaField.js
@@ -36,8 +36,8 @@ class MarkdownTextAreaField extends Component {
               <FormattedMessage id="app.markdownTextArea.showPreview" defaultMessage="Preview" />
             </OnOffCheckbox>
           </Col>
-          <Col sm={8}>
-            <Form.Text className="text-end">
+          <Col sm={8} className="text-end">
+            <Form.Text>
               <FormattedMessage
                 id="app.markdownTextArea.canUseMarkdown"
                 defaultMessage="You can use <a>markdown syntax</a> in this field."
@@ -54,18 +54,12 @@ class MarkdownTextAreaField extends Component {
         </Row>
 
         {showPreview && (
-          <div className="mt-3">
-            <h6>
-              <FormattedMessage id="app.markdownTextArea.preview" defaultMessage="Preview:" />
-            </h6>
-            <div className={styles.preview}>
+          <div className="mt-1">
+            <div className={`${styles.preview} ${value.length === 0 ? styles.previewEmpty : ''}`}>
               {value.length === 0 && (
-                <p>
-                  <small>
-                    (
-                    <FormattedMessage id="app.markdownTextArea.empty" defaultMessage="Empty" />)
-                  </small>
-                </p>
+                <>
+                  (<FormattedMessage id="app.markdownTextArea.empty" defaultMessage="Empty" />)
+                </>
               )}
               <Markdown source={value} />
             </div>
diff --git a/src/components/forms/Fields/MarkdownTextAreaField.less b/src/components/forms/Fields/MarkdownTextAreaField.less
index c8ab13c0b..5db2607c5 100644
--- a/src/components/forms/Fields/MarkdownTextAreaField.less
+++ b/src/components/forms/Fields/MarkdownTextAreaField.less
@@ -1,6 +1,15 @@
 .preview {
   background: #eee;
   border: 1px solid #ccc;
-  padding: 10px 5px;
+  padding: 0.5rem;
   margin-bottom: 2em;
+  border-radius: 0.25rem;
+}
+
+.previewEmpty {
+  color: #888;
+  font-size: 80%;
+  font-style: italic;
+  text-align: center;
+  padding-bottom: 0.75rem;
 }
diff --git a/src/components/helpers/SourceCodeViewer/SourceCodeViewer.css b/src/components/helpers/SourceCodeViewer/SourceCodeViewer.css
index eff3dae96..f2a58333a 100644
--- a/src/components/helpers/SourceCodeViewer/SourceCodeViewer.css
+++ b/src/components/helpers/SourceCodeViewer/SourceCodeViewer.css
@@ -59,6 +59,11 @@ pre .sourceCodeViewerComments, code .sourceCodeViewerComments {
   border-radius: 0.2em;
   padding: 0.5em;
   position: relative;
+  /* reset the font so the code view font is not inherited */
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
 }
 
 .sourceCodeViewerComments > div.issue {
@@ -150,4 +155,4 @@ pre .sourceCodeViewerComments, code .sourceCodeViewerComments {
 
 .sourceCodeViewer.addComment .scvAddButton:hover::before {
   opacity: 1;
-}
\ No newline at end of file
+}