Keep controls table while editing

src/style.css

@@ -238,36 +238,37 @@ th, td {
   padding: 0 16px;
 }
 
-.modal[hidden] {
-  display: none;
-}
-
 .actions {
   position: absolute;
   top: 16px;
   left: 16px;
 }
 
-.modal {
-  position: fixed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, .8);
-  animation: fadeIn .3s both
+#sidebar-toggle::after {
+  content: "🡒";
 }
-
-.modal-content {
-  overflow: auto;
-  width: 600px;
-  max-width: calc(100vw - 20px);
-  max-height: calc(100vh - 20px);
-  padding: 20px;
-  background-color: #1a1a1a;
+.has-sidebar #sidebar-toggle::after {
+  content: "🡐";
+}
+#sidebar {
+  margin-left: -600px;
+  padding-left: .5rem;
+  transition: all .3s;
+  position: absolute;
+  pointer-events: none;
+}
+.has-sidebar #sidebar {
+  margin: -.2rem 0 0 0;
+}
+.has-sidebar #sidebar-toggle {
+  margin-left: 7rem;
+  transition: all .3s;
+}
+#controls {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1em;
+  flex-grow: 1;
 }
 
 @media (prefers-color-scheme: light) {
@@ -302,7 +303,7 @@ th, td {
   th, td {
     border-bottom: thin solid hsla(0, 0%, 0%, .12);
   }
-  .modal-content {
+  .sidebar-content {
     background-color: #f0f0f0;
   }
 }