--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -399,16 +399,22 @@ 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 {
   background-color: var(--theme-tab-toolbar-background);
   border-top: 1px solid var(--theme-splitter-color);
 }
 
 .jsterm-input-node {
@@ -453,16 +459,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 +753,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);
@@ -1154,18 +1156,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%;
 }

--- a/devtools/client/webconsole/jsterm.js
+++ b/devtools/client/webconsole/jsterm.js
@@ -246,17 +246,16 @@ JSTerm.prototype = {
     let autocompleteOptions = {
       onSelect: this.onAutocompleteSelect.bind(this),
       onClick: this.acceptProposedCompletion.bind(this),
       listId: "webConsole_autocompletePopupListBox",
       position: "top",
       theme: "auto",
       autoSelect: true
     };
-
     let doc = this.hud.document;
     let toolbox = gDevTools.getToolbox(this.hud.owner.target);
     let tooltipDoc = toolbox ? toolbox.doc : doc;
     // The popup will be attached to the toolbox document or HUD document in the case
     // such as the browser console which doesn't have a toolbox.
     this.autocompletePopup = new AutocompletePopup(tooltipDoc, autocompleteOptions);
     let inputContainer = doc.querySelector(".jsterm-input-container");
     this.completeNode = doc.querySelector(".jsterm-complete-node");
@@ -278,16 +277,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>