diff --git a/devtools/client/webconsole/components/App.css b/devtools/client/webconsole/components/App.css
index 3735ecff1972..92ce84da93b0 100644
--- a/devtools/client/webconsole/components/App.css
+++ b/devtools/client/webconsole/components/App.css
@@ -154,13 +154,21 @@ body {
   background-image: url("chrome://devtools/skin/images/webconsole/editor.svg");
 }
 
-.reverse-search {
+.webconsole-app .reverse-search {
   grid-column: 1 / 2;
   grid-row: -1 / -2;
+  /* Those 2 next lines make it so the element isn't impacting the grid column size, but
+     will still take the whole available space. */
+  width: 0;
+  min-width: 100%;
+  /* Let the reverse search buttons wrap to the next line */
+  flex-wrap: wrap;
+  justify-content: end;
   border-top: 1px solid var(--theme-splitter-color);
   border-inline-end: 1px solid var(--theme-splitter-color);
 }
 
+
 .sidebar {
   display: grid;
   grid-row: 1 / -1;
diff --git a/devtools/client/webconsole/components/Input/ReverseSearchInput.css b/devtools/client/webconsole/components/Input/ReverseSearchInput.css
index b63e2e607fd4..424fe55c9bc5 100644
--- a/devtools/client/webconsole/components/Input/ReverseSearchInput.css
+++ b/devtools/client/webconsole/components/Input/ReverseSearchInput.css
@@ -35,6 +35,9 @@
   fill: var(--theme-icon-dimmed-color);
   text-align: match-parent;
   unicode-bidi: plaintext;
+  min-width: 80px;
+  flex-shrink: 1;
+  flex-basis: 0;
 }
 
 .reverse-search:dir(ltr) input {
@@ -58,6 +61,12 @@
   fill: var(--theme-icon-checked-color);
 }
 
+.reverse-search-actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: baseline;
+}
+
 .reverse-search-info {
   flex-shrink: 0;
   padding: 0 8px;
diff --git a/devtools/client/webconsole/components/Input/ReverseSearchInput.js b/devtools/client/webconsole/components/Input/ReverseSearchInput.js
index 6752beacffe2..7456e26f95dc 100644
--- a/devtools/client/webconsole/components/Input/ReverseSearchInput.js
+++ b/devtools/client/webconsole/components/Input/ReverseSearchInput.js
@@ -247,18 +247,23 @@ class ReverseSearchInput extends Component {
         onInput: ({ target }) =>
           dispatch(actions.reverseSearchInputChange(target.value)),
       }),
-      this.renderSearchInformation(),
-      this.renderNavigationButtons(),
-      dom.button({
-        className: "devtools-button reverse-search-close-button",
-        title: l10n.getFormatStr(
-          "webconsole.reverseSearch.closeButton.tooltip",
-          ["Esc" + (isMacOS ? " | Ctrl + C" : "")]
-        ),
-        onClick: () => {
-          dispatch(actions.reverseSearchInputToggle());
+      dom.div(
+        {
+          className: "reverse-search-actions",
         },
-      })
+        this.renderSearchInformation(),
+        this.renderNavigationButtons(),
+        dom.button({
+          className: "devtools-button reverse-search-close-button",
+          title: l10n.getFormatStr(
+            "webconsole.reverseSearch.closeButton.tooltip",
+            ["Esc" + (isMacOS ? " | Ctrl + C" : "")]
+          ),
+          onClick: () => {
+            dispatch(actions.reverseSearchInputToggle());
+          },
+        })
+      )
     );
   }
 }