--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -822,19 +822,19 @@ a.learn-more-link.webconsole-learn-more-
   display: flex;
   /* Wrap so the "Hidden messages" bar can go to its own row if needed */
   flex-wrap: wrap;
   --primary-toolbar-height: 29px;
 }
 
 .webconsole-filterbar-primary {
   display: flex;
-  /* We want the toolbar (which contain the text search input) to be at least 200px
-  so we don't allow to shrink it */
-  flex: 100 0 200px;
+  /* We want the toolbar (which contain the text search input) to fit
+  the content, we don't allow to shrink/overlap it */
+  flex: 100 0 -moz-fit-content;
   align-items: center;
   min-height: var(--primary-toolbar-height);
 }
 
 .devtools-toolbar.webconsole-filterbar-secondary {
   display: flex;
   width: 100%;
   align-items: center;
@@ -860,16 +860,17 @@ a.learn-more-link.webconsole-learn-more-
 .webconsole-filterbar-filtered-messages {
   /* Needed so the bar takes the whole horizontal space when it is wrapped */
   flex-grow: 1;
   justify-content: flex-end;
   color: var(--theme-comment);
   text-align: end;
   align-items: center;
   min-height: var(--primary-toolbar-height);
+  line-height: var(--primary-toolbar-height);
 }
 
 .webconsole-filterbar-filtered-messages .filter-message-text {
   font-style: italic;
   -moz-user-select: none;
 }
 
 .webconsole-filterbar-filtered-messages .reset-filters-button {