--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -399,22 +399,32 @@ a {
 /* JSTerm Styles */
 
 html #jsterm-wrapper,
 html .jsterm-stack-node,
 html .jsterm-input-node-html,
 html #webconsole-notificationbox {
   flex: 0;
   width: 100vw;
+  position: relative;
+}
+
+html #jsterm-spacer {
+  flex: 1;
+  min-height: 0;
 }
 
-.jsterm-input-container {
+/* Keep the border for the browser console */
+hbox.jsterm-input-container {
   background-color: var(--theme-tab-toolbar-background);
   border-top: 1px solid var(--theme-splitter-color);
 }
+.theme-light hbox.jsterm-input-container {
+  background-color: white;
+}
 
 .jsterm-input-node {
   /* Always allow scrolling on input - it auto expands in js by setting height,
      but don't want it to get bigger than the window. 24px = toolbar height. */
   max-height: calc(90vh - 24px);
   background-image: var(--theme-command-line-image);
   background-repeat: no-repeat;
   background-size: 16px 16px;
@@ -422,27 +432,16 @@ html #webconsole-notificationbox {
   color: var(--theme-content-color1);
   box-sizing: border-box;
 }
 
 .jsterm-complete-node {
   color: var(--theme-comment);
 }
 
-.theme-light .jsterm-input-container {
-  /* For light theme use a white background for the input - it looks better
-     than off-white */
-  background-color: #fff;
-  border-top-color: #e0e0e0;
-}
-
-.theme-firebug .jsterm-input-container {
-  border-top: 1px solid #ccc;
-}
-
 /*  styles for the new HTML frontend */
 
 html .jsterm-stack-node {
   position: relative;
 }
 
 textarea.jsterm-input-node,
 textarea.jsterm-complete-node {
@@ -453,16 +452,17 @@ textarea.jsterm-complete-node {
   resize: none;
   font-size: inherit;
   line-height: 16px;
   overflow-x: hidden;
   /* Set padding for console input on textarea to make sure it is included in
      scrollHeight that is used when resizing JSTerminal's input. */
   padding: 4px 0;
   padding-inline-start: 20px;
+  outline: none;
 }
 
 textarea.jsterm-complete-node {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   pointer-events: none;
@@ -746,21 +746,16 @@ a.learn-more-link.webconsole-learn-more-
   border-top: 1px solid #D7D7D7;
   border-bottom: 2px solid #D7D7D7;
   border-left: 1px solid #D7D7D7;
   border-right: 1px solid #D7D7D7;
 }
 
 
 /* NEW CONSOLE STYLES */
-
-#output-container {
-  height: 100%;
-}
-
 .webconsole-output-wrapper {
   display: flex;
   flex-direction: column;
   height: 100%;
   -moz-user-focus: normal;
   color: var(--console-output-color);
   --console-output-indent-width: 1rem;
   --console-output-indent-border-color: var(--theme-selection-background);
@@ -769,26 +764,28 @@ a.learn-more-link.webconsole-learn-more-
   --attachment-margin-block-end: 3px;
   --primary-toolbar-height: 29px;
   --close-button-image: url(chrome://devtools/skin/images/close.svg);
 }
 
 /* Webconsole specific theme variables */
 .theme-light .webconsole-output-wrapper,
 .theme-firebug .webconsole-output-wrapper {
+  --input-border-color: var(--theme-splitter-color)88;
   --error-color: var(--red-70);
   --error-background-color: #FDF2F5;
   --warning-color: var(--yellow-80);
   --warning-background-color: #FFFBD5;
   --console-output-color: var(--grey-90);
   --attachment-border-color: var(--theme-content-color1);
   --repeat-bubble-background-color: var(--theme-highlight-blue);
 }
 
 .theme-dark .webconsole-output-wrapper {
+  --input-border-color: var(--theme-splitter-color);
   --error-color: #FF9494;
   --error-background-color: #442923;
   --warning-color: #FCE19F;
   --warning-background-color: #44391F;
   --console-output-color: white;
   --attachment-border-color: var(--theme-body-color);
   --repeat-bubble-background-color: var(--blue-60);
 }
@@ -880,16 +877,21 @@ a.learn-more-link.webconsole-learn-more-
   margin-inline-start: 0.5em;
 }
 
 .webconsole-output {
   flex: 1;
   overflow: auto;
 }
 
+/* Separator between the jsterm and output if there are any messages */
+.webconsole-output:not(:empty) {
+  border-bottom: 1px solid var(--input-border-color);
+}
+
 .webconsole-output-wrapper .message {
   --border-size: 3px;
   border-inline-start: var(--border-size) solid transparent;
 }
 
 .webconsole-output-wrapper .message:hover {
   border-inline-start-color: var(--theme-highlight-blue);
 }
@@ -1165,18 +1167,19 @@ body {
 
 #app-wrapper {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
 body #output-container {
-  flex: 1;
   overflow: hidden;
+  min-width: 0;
+  min-height: 0;
 }
 
 .webconsole-output-wrapper {
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-rows: auto 1fr;
   height: 100%;
   width: 100vw;

--- a/devtools/client/webconsole/jsterm.js
+++ b/devtools/client/webconsole/jsterm.js
@@ -278,16 +278,25 @@ JSTerm.prototype = {
       this.inputNode.addEventListener("drop", this._onPaste);
       this.inputNode.addEventListener("input", this._inputEventHandler);
       this.inputNode.addEventListener("keyup", this._inputEventHandler);
       this.inputNode.addEventListener("focus", this._focusEventHandler);
     }
 
     this.hud.window.addEventListener("blur", this._blurEventHandler);
     this.lastInputValue && this.setInputValue(this.lastInputValue);
+
+    this.spacerNode = doc.querySelector("#jsterm-spacer");
+    if (this.spacerNode) {
+      // This node only exists in the HTML document
+      this.spacerNode.addEventListener("mousedown", (event) => {
+        this.focus();
+        event.preventDefault();
+      });
+    }
   },
 
   focus: function () {
     if (!this.inputNode.getAttribute("focused")) {
       this.inputNode.focus();
     }
   },
 

--- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_input_focus.js
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_input_focus.js
@@ -36,16 +36,21 @@ add_task(async function() {
   ok(hasFocus(inputNode), "input node is focused, second time");
 
   info("Setting a text selection and making sure a click does not re-focus");
   await waitForBlurredInput(hud);
   let selection = hud.iframeWindow.getSelection();
   selection.selectAllChildren(msg.querySelector(".message-body"));
   EventUtils.sendMouseEvent({type: "click"}, msg);
   ok(!hasFocus(inputNode), "input node not focused after text is selected");
+
+  info("Focus the input by clicking the space below the input");
+  inputNode.blur();
+  EventUtils.sendMouseEvent({type: "mousedown"}, hud.jsterm.spacerNode);
+  ok(hasFocus(inputNode), "Focused after mousedown on spacer");
 });
 
 function waitForBlurredInput(hud) {
   let inputNode = hud.jsterm.inputNode;
   return new Promise(resolve => {
     let lostFocus = () => {
       ok(!hasFocus(inputNode), "input node is not focused");
       resolve();

--- a/devtools/client/webconsole/webconsole.html
+++ b/devtools/client/webconsole/webconsole.html
@@ -29,11 +29,12 @@
             <textarea class="jsterm-complete-node devtools-monospace"
                       tabindex="-1"></textarea>
             <textarea class="jsterm-input-node devtools-monospace"
                       rows="1" tabindex="0"
                       aria-autocomplete="list"></textarea>
           </div>
         </div>
       </div>
+      <div id="jsterm-spacer"></div>
     </div>
   </body>
 </html>