fix grid layout in editors

backstage/static/styles/main.css

@@ -15,8 +15,27 @@
   margin-right: auto;
 }
 
-.column__preview {
+.ui.segment {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+}
+
+.ui .column .column__edit {
+  box-shadow: 0px 0px 8px rgb(182, 181, 181);
+  border-radius: 5px;
+  width: 49%!important;
+  margin-right: 2%;
+  padding: 1rem!important;
+}
+
+.ui .column .column__preview {
   overflow: hidden;
+  box-shadow: 0px 0px 8px rgb(182, 181, 181);
+  width: 49%!important;
+  border-radius: 5px;
+  padding: 1rem!important;
 }
 
 .column__h3 {

backstage/templates/editor.html

@@ -1,8 +1,8 @@
 {% extends "layout.html" %}
 {% block main %}
   <div class="ui segment">
-    <div class="ui two column very relaxed grid">
-      <div class="column">
+    <div class="ui two column very relaxed grid" style="margin-left:0.5rem;margin-right:0.5rem;">
+      <div class="column column__edit">
         <h3 class="h3 column__h3"><i class="fas fa-user-edit mr-2"></i>編輯</h3>
         <div class="mb-2">
           <button class="btn__arTitle mb-2" id="title_button">標題修改</button>
@@ -22,7 +22,6 @@
         <iframe src='http://localhost:1313{{ url }}/' width="100%" height="100%"></iframe>
       </div>
     </div>
-    <div class="ui vertical divider">
     </div>
   </div>
 {% endblock main %}