UX: make admin code editor height more flexible (#32241)

Reported here:
https://meta.discourse.org/t/issue-with-custom-css-save-button-on-smaller-screens/358505


Allows the admin code editor to adjust to the viewport regardless of
error message and nav height in both normal and maximized modes


Before:


![image](https://github.com/user-attachments/assets/657fb938-04d2-4ad8-a0c3-f5b6177d7fa2)


![image](https://github.com/user-attachments/assets/bfbf532d-d193-4387-b8c9-546fb6653ff6)


After:


![image](https://github.com/user-attachments/assets/9c2cb0ad-2eff-4171-8912-918dd5326eae)


![image](https://github.com/user-attachments/assets/fa865a13-0891-4fa6-9af6-ed2422bf676e)

app/assets/javascripts/admin/addon/templates/customize-themes-edit.gjs

@@ -37,6 +37,7 @@ export default RouteTemplate(
           @fieldAdded={{@controller.fieldAdded}}
           @maximized={{@controller.maximized}}
           @save={{@controller.save}}
+          @class="editor-container"
         />
 
         <div class="admin-footer">

app/assets/stylesheets/admin/customize.scss

@@ -614,51 +614,6 @@
     }
   }
 
-  .current-style.maximized {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: z("fullscreen");
-    background: var(--secondary);
-    width: 100%;
-    padding: 0;
-    margin: 0;
-
-    .admin-container {
-      position: absolute;
-      bottom: 50px;
-      top: 80px;
-      width: 100%;
-    }
-
-    .admin-footer {
-      margin-top: 10px;
-    }
-
-    .ace-wrapper {
-      height: calc(100vh - 270px);
-    }
-
-    .edit-main-nav ~ .ace-wrapper {
-      height: calc(100vh - 315px);
-    }
-
-    .wrapper {
-      position: absolute;
-      top: 20px;
-      bottom: 10px;
-      left: 20px;
-      right: 20px;
-    }
-  }
-
-  .content-list,
-  .current-style {
-    float: left;
-  }
-
   .content-list ul {
     margin-bottom: 10px;
   }
@@ -666,6 +621,54 @@
   .current-style {
     width: 100%;
 
+    .wrapper {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      height: calc(100dvh - var(--header-offset) - 3em);
+      padding: 0;
+    }
+
+    .editor-container {
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .ace-wrapper {
+      position: relative;
+      min-height: unset;
+      flex: 1 1 0;
+    }
+
+    &.maximized {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: z("fullscreen");
+      background: var(--secondary);
+      padding: 0;
+      margin: 0;
+
+      .wrapper {
+        padding: 1em;
+        height: 100dvh;
+      }
+
+      .admin-container {
+        position: absolute;
+        bottom: 50px;
+        top: 80px;
+        width: 100%;
+      }
+
+      .admin-footer {
+        margin-top: 10px;
+      }
+    }
+
     .admin-container {
       margin: 0;
     }
@@ -711,13 +714,6 @@
       }
     }
 
-    .ace-wrapper {
-      position: relative;
-      height: calc(100vh - 450px);
-      min-height: 200px;
-      width: 100%;
-    }
-
     .ace_editor {
       position: absolute;
       left: 0;