Improve multiple styles for the drawer and code editor

packages/bbui/src/Drawer/DrawerContent.svelte

@@ -39,6 +39,10 @@
   .sidebar::-webkit-scrollbar {
     display: none;
   }
+  .main {
+    height: 100%;
+    overflow: hidden;
+  }
   .padding .main {
     padding: var(--spacing-xl);
   }

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

@@ -321,7 +321,7 @@
     top: 1px;
     height: calc(100% - 2px);
     width: 100%;
-    background: var(--spectrum-global-color-gray-75);
+    background: var(--spectrum-global-color-gray-100);
     z-index: -2;
   }
   .code-editor :global(.cm-gutterElement) {
@@ -343,7 +343,8 @@
     z-index: -2;
   }
   .code-editor :global(.cm-selectionBackground) {
-    background-color: var(--spectrum-global-color-gray-300) !important;
+    background-color: var(--spectrum-global-color-blue-400) !important;
+    opacity: 0.4;
   }
 
   .code-editor :global(.cm-tooltip.cm-completionInfo) {

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

@@ -114,8 +114,7 @@ export const getDefaultTheme = opts => {
         backgroundColor: "var(--spectrum-global-color-gray-200)",
       },
       "& .binding-wrap": {
-        color: "var(--spectrum-global-color-blue-700)",
-        fontFamily: "monospace",
+        color: "var(--spectrum-global-color-orange-600)",
       },
     },
     { dark }

packages/builder/src/components/common/bindings/BindingSidePanel.svelte

@@ -258,6 +258,8 @@
 <style>
   .binding-side-panel {
     border-left: var(--border-light);
+    height: 100%;
+    overflow: auto;
   }
 
   .search :global(input) {