UX: Adjustments to admin theme editor (#12112)

app/assets/stylesheets/common/admin/customize.scss

@@ -1,40 +1,5 @@
 // Customise area
 
-// email templates
-
-.content-editor {
-  min-height: 500px;
-  float: left;
-  width: 54.054%;
-  margin-left: 1.8018%;
-  p.description {
-    color: var(--primary);
-  }
-  .controls {
-    margin-top: 10px;
-  }
-  textarea.plain {
-    width: 98%;
-    height: 200px;
-  }
-  .d-editor-input {
-    width: 98%;
-    height: 200px;
-  }
-  .ace-wrapper {
-    position: relative;
-    height: 600px;
-    width: 100%;
-  }
-  .ace_editor {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-}
-
 .email-template {
   input {
     width: 100%;
@@ -375,7 +340,7 @@
     left: 0;
     right: 0;
     z-index: z("fullscreen");
-    background-color: white;
+    background-color: var(--secondary);
     width: 100%;
     padding: 0;
     margin: 0;
@@ -455,7 +420,8 @@
 
     .ace-wrapper {
       position: relative;
-      height: 600px;
+      height: calc(100vh - 450px);
+      min-height: 200px;
       width: 100%;
     }
 
@@ -467,8 +433,7 @@
         width: 100%;
       }
       .admin-footer {
-        position: absolute;
-        bottom: 10px;
+        margin-top: 10px;
       }
       .ace-wrapper {
         height: calc(100vh - 200px);
@@ -871,7 +836,8 @@
   .ace-wrapper {
     position: relative;
     width: 100%;
-    height: 400px;
+    height: calc(100vh - 480px);
+    min-height: 200px;
     .ace_editor {
       position: absolute;
       left: 0;