apply display position

resource/js/components/PageEditor/CodeMirrorEditor.js

@@ -503,8 +503,8 @@ export default class CodeMirrorEditor extends AbstractEditor {
                 <ul>
                   <li>| Left align | Right align | Center align |</li>
                   <li>|:------------|--------------:|:--------------:|</li>
-                  <li>| &nbsp;column 1|&nbsp; &nbsp;column 2&nbsp; &nbsp;|&nbsp; &nbsp;column 3&nbsp; &nbsp;|</li>
-                  <li>| &nbsp;column 1|&nbsp; &nbsp;column 2&nbsp; &nbsp;|&nbsp; &nbsp;column 3&nbsp; &nbsp;|</li>
+                  <li>|column 1&nbsp;&nbsp;&nbsp;|&nbsp; &nbsp; &nbsp;column 2|&nbsp; &nbsp;column 3&nbsp; &nbsp;|</li>
+                  <li>|column 1&nbsp;&nbsp;&nbsp;|&nbsp; &nbsp; &nbsp;column 2|&nbsp; &nbsp;column 3&nbsp; &nbsp;|</li>
                 </ul>
 
               </div>

resource/styles/scss/_editor-overlay.scss

@@ -28,6 +28,8 @@
 
     .overlay-content {
       padding: 0.5em;
+      right: 0;
+      bottom: 0;
     }
   }
 
@@ -37,22 +39,17 @@
   // cheat sheat
   .overlay.overlay-gfm-cheatsheat {
 
+
     justify-content: end;
-    //align-items: end;
+    align-items: end;
 
     pointer-events: none;
 
-    float: left;
-    position: absolute;
+    float: right;
     height: 400px;
     width: 320px;
     border: solid 1.5px lightgray;
-
-
-    right: 0;
-    bottom: 0;
-    margin-left: 100px;
-
+    margin: auto;
         .overlay-content {
       color: $text-muted;
     }