Get edit modal working correctly

src/styles/_containers.scss

@@ -1,6 +1,6 @@
 header {
   display: block;
-  padding: 5px 20px;
+  padding: 5px $general-padding;
   border-bottom: 1px solid $mid;
   margin: 0 0 5px;
 
@@ -37,14 +37,14 @@ main {
     border: $border;
 
     dl {
-      padding: 0 20px;
+      padding: 0 $general-padding;
     }
   }
 }
 
 footer {
   display: block;
-  padding: 20px;
+  padding: $general-padding;
   border-top: 1px solid $mid;
   margin: 5px 0 0;
 }

src/styles/_elements.scss

@@ -13,7 +13,7 @@ label {
   font-weight: bold;
 
   &:not(:last-child) {
-    margin-bottom: 20px;
+    margin-bottom: $general-padding;
   }
 
   small {
@@ -87,10 +87,17 @@ span .tag {
 
   .modal-content {
     position: absolute;
-    top: 10%;
-    left: 20%;
-    bottom: 10%;
-    right: 20%;
+    // top: 10%;
+    // left: 20%;
+    // bottom: 10%;
+    // right: 20%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 700px;
+    max-width: 100%;
+    height: 600px;
+    max-height: 100%;
     background-color: $white;
     border: $border;
     border-radius: 5px;
@@ -102,25 +109,6 @@ span .tag {
       font-size: 200%;
       cursor: pointer;
     }
-
-    nav ul {
-      margin-bottom: 0;
-    }
-
-    section {
-      padding: 20px;
-      margin-bottom: 80px;
-      overflow-y: auto;
-      height: 78%;
-    }
-
-    section~footer {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      background-color: $white;
-    }
   }
 }
 
@@ -132,7 +120,7 @@ span .tag {
     display: inline-block;
     list-style: none;
     margin: 0 2px -1px;
-    padding: 10px 20px;
+    padding: 10px $general-padding;
     border-top: $border;
     border-left: $border;
     border-right: $border;

src/styles/_structure.scss

@@ -19,6 +19,10 @@
       left: 0;
       right: 0;
       bottom: 0;
+      transform: unset;
+      max-width: unset;
+      height: unset;
+      max-height: unset;
       margin: 0 auto;
       width: 90%;
       padding: 20px;
@@ -132,6 +136,38 @@
 }
 
 #editModal {
+  $nav-font-height: 16px;
+  nav {
+    padding-top: $general-padding;
+
+    ul {
+      margin: 0;
+      padding: 0;
+
+      li {
+        font-size: $nav-font-height;
+        line-height: $nav-font-height;
+      }
+    }
+  }
+  section, footer {
+    position: absolute;
+    width: 100%;
+  }
+  section {
+    top: ($general-padding * 2) + $nav-font-height + 10px;;
+    bottom: ($general-padding * 2) + $nav-font-height + 16px;
+    padding: $general-padding;
+    overflow-y: auto;
+  }
+  footer {
+    bottom: 0;
+
+    .button {
+      font-size: $nav-font-height;
+      line-height: $nav-font-height;
+    }
+  }
   #editDescription {
     width: 100%;
     height: 350px;

src/styles/_variables.scss

@@ -9,4 +9,5 @@ $white: #ffffff;
 
 $red: #d42932;
 
-$border: 1px solid $dark;
+$border: 1px solid $dark;
+$general-padding: 20px;