CSS tweaks for shell

frontend/src/organisms/connection/collection/index.svelte

@@ -43,7 +43,8 @@
 <div class="view" class:empty={!collection}>
   {#if collection}
     {#key collection}
-      <TabBar tabs={[
+      <TabBar
+        tabs={[
           { key: 'stats', icon: 'chart', title: 'Stats' },
           { key: 'find', icon: 'db', title: 'Find' },
           { key: 'insert', icon: '+', title: 'Insert' },
@@ -53,7 +54,8 @@
           { key: 'aggregate', icon: 're', title: 'Aggregate' },
           { key: 'shell', icon: 'shell', title: 'Shell' },
         ]}
-        bind:selectedKey={tab} />
+        bind:selectedKey={tab}
+      />
 
       <div class="container">
         {#if tab === 'stats'} <Stats {collection} />

frontend/src/organisms/connection/collection/shell.svelte

@@ -30,11 +30,12 @@
 </script>
 
 <div class="shell">
-  <div class="panels">
+  <div class="overflow">
     <!-- svelte-ignore a11y-label-has-associated-control -->
     <label class="field">
       <CodeEditor bind:text={script} {extensions} />
     </label>
+  </div>
 
   <div class="output">
     {#if busy}
@@ -49,7 +50,6 @@
       <pre>{result.output || ''}</pre>
     {/if}
   </div>
-  </div>
 
   <div class="controls">
     {#key result}
@@ -69,18 +69,16 @@
 <style>
   .shell {
     display: grid;
-    grid-template: 1fr auto / 1fr;
+    grid-template: 1fr auto / 1fr 1fr;
   }
 
-  .panels {
-    display: flex;
+  .overflow {
+    overflow: auto;
+  }
+
+  .field {
     height: 100%;
   }
-  .panels > * {
-    flex: 1 1 0;
-    width: 100%;
-  }
-
   .field :global(.editor) {
     border-radius: 0;
   }
@@ -97,6 +95,9 @@
   .output pre {
     font-family: monospace;
     padding: 0.5rem;
+    user-select: text;
+    -webkit-user-select: text;
+    cursor: text;
   }
   .output :global(.blankstate) {
     margin: auto;
@@ -107,6 +108,7 @@
     margin-top: 0.5rem;
     display: flex;
     align-items: center;
+    grid-column: 1 / 3;
   }
   .controls .status {
     margin-right: auto;