change to css grid

src/editor/templates/editorTemplate.js

@@ -1,46 +1,11 @@
 const editorTemplate = document.createElement('template');
 
 editorTemplate.innerHTML = `
-  <style>
-  #svgroot {
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  #workarea {
-    display: inline-table-cell;
-    position:absolute;
-    top: 40px;
-    left: 40px;
-    bottom: 40px;
-    right: 14px;
-    background-color: #A0A0A0;
-    border: 1px solid var(--border-color);
-    overflow: auto;
-    text-align: center;
-  }
-  
-  #svgcanvas {
-    line-height: normal;
-    display: inline-block;
-    background: var(--canvas-bg-color);
-    text-align: center;
-    vertical-align: middle;
-    width: 640px;
-    height: 480px;
-    /* for widget regions that shouldn't react to dragging */
-    -apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px);
-    position: relative;
-  }
-  
-  </style>
-</div>
-<div id="workarea">
- <div id="svgcanvas" style="position: relative;">
- </div>
-</div>
+  <div class="svg_editor">
+    <div id="workarea">
+      <div id="svgcanvas"></div>
+    </div>
+  </div>
 `;
 
 export default editorTemplate;

src/editor/templates/rulersTemplate.js

@@ -5,9 +5,11 @@ rulersTemplate.innerHTML = `
  
   /* Rulers
 ——————————————————————————————————————*/
-
+#rulers {
+  position: relative;
+  top: -14px;
+}
 #rulers > div {
-  position: absolute;
   background: var(--ruler-color);
   z-index: 1;
   overflow: hidden;
@@ -54,32 +56,20 @@ rulersTemplate.innerHTML = `
 #ruler_y > div {
   overflow: hidden;
 }
-/*
-@media screen and (max-width: 1250px) {
-  #rulers #ruler_corner,
-  #rulers #ruler_x {
-    top: 71px;
-  }
-  
-  #rulers #ruler_y {
-    top: 57px;
-  }
-}
-*/
   </style>
   <div id="rulers">
- <div id="ruler_corner"></div>
- <div id="ruler_x">
-   <div>
-     <canvas height="15"></canvas>
-   </div>
- </div>
- <div id="ruler_y">
-   <div>
-     <canvas width="15"></canvas>
-   </div>
- </div>
-</div>
+    <div id="ruler_corner"></div>
+    <div id="ruler_x">
+      <div>
+        <canvas height="15"></canvas>
+      </div>
+    </div>
+    <div id="ruler_y">
+      <div>
+        <canvas width="15"></canvas>
+      </div>
+    </div>
+  </div>
 `;
 
 export default rulersTemplate;