improving markdown editor

frontend/src/Components/MarkdownEditor.svelte

@@ -106,13 +106,15 @@
 
 <div class="markdown {editing?'editing':''}">
 {#if editing}
+    <span class="hint">{@html t('markdown_supported')}</span>
     <textarea bind:value={editValue.source} onkeyup={typed} autofocus={!simple}></textarea>
-    <div>{@html target(editValue.rendered)}</div>
+    <div class="preview">{@html target(editValue.rendered)}</div>
+    {#if !simple}
     <div class="buttons">
         <button class="cancel" onclick={e => editing = false}>{t('cancel')}</button>
-        <span>{@html t('markdown_supported')}</span>
         <button class="save" onclick={doSave}>{t('save')}</button>
     </div>
+    {/if}
 {:else}
     <svelte:element this={type} {onclick} {oncontextmenu} class={{editable}} title={t('right_click_to_edit')} >{@html target(editValue.rendered)}</svelte:element>
 {/if}

web/src/main/resources/web/css/default.css

@@ -295,7 +295,8 @@ span.timetracking {
     grid-template-columns: 1fr 1fr;
     column-gap: 10px;
 }
-.markdown .buttons{
+.markdown .buttons,
+.markdown .hint{
     grid-column-end: span 2;
 }
 
@@ -383,6 +384,17 @@ a.wikilink{
         text-align: initial;
         padding-top: 8px;
     }
+
+    .markdown.editing{
+        display: block;
+        grid-template-columns: 1fr 1fr;
+        column-gap: 10px;
+    }
+
+    .markdown textarea{
+        width: calc(100% - 10px);
+        min-height: 50px;
+    }
 }
 
 fieldset.vcard{