1 files changed, 60 insertions, 21 deletions

diff --git a/src/css/index.css b/src/css/index.css
index adc1cfe..3764dac 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,34 +1,70 @@
+:root {
+  --content-border: solid lightgray 2px;
+  --content-border-radius: 5px;
+}
+
 body {
   display: flex;
   justify-items: stretch;
+  width: 100%;
 }
 
 .result-html {
-  flex: 1;
-  height: calc(100vh - 20px);
-  border: solid lightgray 2px;
-  border-radius: 5px;
+  flex: 0 0 50%;
+  border: var(--content-border);
+  border-radius: var(--content-border-radius);
   margin: 10px;
 }
 
 .editor {
-  flex: 1;
+  flex: 0 0 50%;
   max-width: 50vw;
+  height: calc(100vh - 15px);
   margin: 10px;
 }
 
-.TinyMDE {
-  height: calc(100vh - 55px);
-  padding: 16px;
-  overflow-y: scroll;
-  border: 2px solid lightgray;
-  border-radius: 5px;
+.EasyMDEContainer {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 20px);
+  box-sizing: border-box;
+
+  .CodeMirror {
+    order: 1;
+    flex-grow: 1;
+    border: var(--content-border);
+    border-radius: var(--content-border-radius);
+    padding-inline: 0;
+
+    span {
+      white-space: pre;
+    }
+    .invalid-input {
+      text-decoration: red wavy underline 1px;
+    }
+  }
+
+  .editor-toolbar {
+    order: 2;
+    margin-top: 0.5rem;
+    border-left: 1px solid #ced4da;
+    border-right: 1px solid #ced4da;
+    border-bottom: 1px solid #ced4da;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
 
-  span {
-    white-space: pre;
+  .editor-statusbar {
+    order: 3;
   }
-  .invalid-input {
-    text-decoration: red wavy underline 1px;
+}
+
+/* FIXME For those empty line (no child with cm-comment) */
+.CodeMirror-line:has(.cm-comment) {
+  background: rgba(0,0,0,.05) !important;
+
+  .cm-comment {
+    background: none !important;
   }
 }
 
@@ -41,6 +77,7 @@ body {
   overflow-y: scroll;
   border: 2px solid lightgray;
   border-radius: 0.5rem;
+  z-index: 100;
 
   background: #fff;
 }
@@ -55,6 +92,13 @@ body {
   white-space: nowrap;
   align-items: center;
 
+  &:not(:first-child) {
+    border-top: 1px solid rgb(203 213 225);
+  }
+  &.focus {
+    background: rgb(226 232 240);
+  }
+
   * {
     flex-shrink: 0;
     display: inline-block;
@@ -66,15 +110,10 @@ body {
     font-weight: bold;
   }
   .truncate {
+    flex-shrink: 1;
     text-overflow: ellipsis;
     ::before {
       width: 2rem
     }
   }
 }
-.container__suggestion:not(:first-child) {
-  border-top: 1px solid rgb(203 213 225);
-}
-.container__suggestion.focus {
-  background: rgb(226 232 240);
-}