style: markdown hint to the bottom right

csaf-poc · Nov 27, 2023 · b363c2f · b363c2f
1 parent 8247fdf
commit b363c2f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/src/lib/KeyValue.svelte b/src/lib/KeyValue.svelte
@@ -22,12 +22,13 @@
       {#if key == "text" || key == "Text"}
         <tr
           ><td class="key">{key}</td><td class="value">
-            <small class="hint">Markdown</small>
             <div class="display-markdown">
               {@html DOMPurify.sanitize(
                 marked.parse(values[index].replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ""))
               )}
+              <br />
             </div>
+            <small class="hint">Markdown</small>
           </td>
         </tr>
       {:else}

diff --git a/src/lib/singleview/notes/Note.svelte b/src/lib/singleview/notes/Note.svelte
@@ -32,11 +32,12 @@
   <h5>Text</h5>
 </div>
 
-<div class="markdowntext">
-  <small class="hint">Markdown</small>
+<div class="markdown-text">
   <div class="display-markdown">
     {@html DOMPurify.sanitize(
       marked.parse(note.text.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ""))
     )}
+    <br />
   </div>
+  <small class="hint">Markdown</small>
 </div>
diff --git a/static/css/main.css b/static/css/main.css
@@ -267,18 +267,23 @@ hr {
 
 .hint {
   background: lightgray;
+  position: absolute;
+  bottom: 0.25rem;
+  right: 0.25rem;
 }
 
 .keyvalue {
   width: 100%;
   overflow-x: auto;
 }
 
-.display-markdown {
+.markdown-text {
+  margin-left: 1rem;
   padding: 0.5rem;
   border: 1px solid lightgray;
   width: 100%;
   overflow-x: auto;
+  position: relative;
 }
 
 .revisionhistory {