Fully refactor drawer rendering to not depend on CSS transforms, which break codemirror

packages/bbui/src/Drawer/Drawer.svelte

@@ -74,17 +74,15 @@
       --spacing: ${spacing}px;
     `
     // Most modal styles are handled by class names
-    if (modal) {
+    if (modal || left == null || width == null) {
       return style
     }
 
-    // Normal drawers need a few additional styles
+    // Drawers observing another dom node need custom position styles
-    left = left ? `${left + width / 2}px` : "20vw"
-    width = width ? `${width - 2 * spacing}px` : "60vw"
     return `
       ${style}
-      left: ${left};
+      left: ${left + spacing}px;
-      width: ${width};
+      width: ${width - 2 * spacing}px;
     `
   }
 
@@ -130,7 +128,7 @@
         const f = easeInOutQuad(t)
         const yOffset = (1 - f) * 200
         return `
-          transform: translateX(-50%) translateY(calc(${yOffset}px + 50% - 1200px * (1 - var(--scale-factor))));
+          transform: translateY(calc(${yOffset}px - 800px * (1 - var(--scale-factor))));
           opacity:${f};
         `
       },
@@ -159,6 +157,7 @@
     <div
       class="drawer"
       class:headless
+      class:stacked={depth > 0}
       class:modal={$modal}
       transition:slide|local
       {style}
@@ -183,8 +182,10 @@
 <style>
   .drawer {
     position: absolute;
-    transform: translateX(-50%) scale(var(--scale-factor))
+    left: 25vw;
-      translateY(calc(50% - 800px * (1 - var(--scale-factor))));
+    width: 50vw;
+    bottom: var(--spacing);
+    height: 420px;
     background: var(--background);
     border: var(--border-light);
     z-index: 3;
@@ -193,19 +194,19 @@
     box-sizing: border-box;
     transition: transform 260ms ease-out, bottom 260ms ease-out,
       left 260ms ease-out, width 260ms ease-out, height 260ms ease-out;
-    height: 420px;
-    bottom: calc(var(--spacing) + 210px);
-    max-width: calc(100vw - 200px);
-    max-height: calc(100vh - 200px);
     display: flex;
     flex-direction: column;
     align-items: stretch;
   }
   .drawer.modal {
-    left: 50vw;
+    left: 15vw;
-    bottom: 50vh;
+    width: 70vw;
-    width: 1600px;
+    bottom: 15vh;
-    height: 800px;
+    height: 70vh;
+  }
+  .drawer.stacked {
+    transform: translateY(calc(-1 * 1024px * (1 - var(--scale-factor))))
+      scale(var(--scale-factor));
   }
 
   .overlay,

packages/builder/src/components/common/CodeEditor/CodeEditor.svelte

@@ -297,11 +297,10 @@
 </div>
 
 <style>
+  /* Editor */
   .code-editor :global(.cm-editor) {
     background: var(--spectrum-global-color-gray-50) !important;
   }
-
-  /* Unify spacing between HBS and JS */
   .code-editor :global(.cm-content) {
     padding: 10px 0;
   }
@@ -309,7 +308,7 @@
     font-size: 12px;
   }
 
-  /* Overrides to ensure background selection is pixel perfect with active line */
+  /* Active line */
   .code-editor :global(.cm-line) {
     height: 16px;
     padding: 0 var(--spacing-s);
@@ -325,16 +324,23 @@
     top: 1px;
     height: calc(100% - 2px);
     width: 100%;
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--spectrum-global-color-gray-100) !important;
     z-index: -2;
   }
+
+  /* Code selection */
+  .code-editor :global(.cm-selectionBackground) {
+    background-color: var(--spectrum-global-color-blue-400) !important;
+    opacity: 0.4;
+  }
+
+  /* Gutters */
   .code-editor :global(.cm-gutterElement) {
     margin-bottom: 0;
   }
-  .code-editor :global(.cm-activeLineGutter) {
+  .code-editor :global(.cm-gutters) {
-    color: var(--spectrum-global-color-gray-700);
+    background-color: var(--spectrum-global-color-gray-75) !important;
-    background: transparent;
+    color: var(--spectrum-global-color-gray-500);
-    position: relative;
   }
   .code-editor :global(.cm-activeLineGutter::before) {
     content: "";
@@ -343,14 +349,16 @@
     top: 1px;
     height: calc(100% - 2px);
     width: 100%;
-    background: var(--spectrum-global-color-gray-200);
+    background: var(--spectrum-global-color-gray-200) !important;
     z-index: -2;
   }
-  .code-editor :global(.cm-selectionBackground) {
+  .code-editor :global(.cm-activeLineGutter) {
-    background-color: var(--spectrum-global-color-blue-400) !important;
+    color: var(--spectrum-global-color-gray-700);
-    opacity: 0.4;
+    background: transparent;
+    position: relative;
   }
 
+  /* Completion popover */
   .code-editor :global(.cm-tooltip.cm-completionInfo) {
     padding: var(--spacing-m);
   }
@@ -365,13 +373,11 @@
       ),
       0, 0;
   }
-
   .code-editor :global(.autocomplete-option .cm-completionDetail) {
     background-color: var(--spectrum-global-color-gray-200);
     border-radius: var(--border-radius-s);
     padding: 4px 6px;
   }
-
   .code-editor :global(.binding__example) {
     padding: 0;
     margin: 0;

packages/builder/src/components/common/CodeEditor/index.js

@@ -31,10 +31,6 @@ export const getDefaultTheme = opts => {
   const { height, resize, dark } = opts
   return EditorView.theme(
     {
-      ".cm-gutters": {
-        backgroundColor: "var(--spectrum-global-color-gray-75)",
-        color: "var(--spectrum-global-color-gray-500)",
-      },
       "&.cm-focused .cm-cursor": {
         borderLeftColor: "var(--spectrum-alias-text-color)",
       },