--- a/devtools/client/themes/firebug-theme.css
+++ b/devtools/client/themes/firebug-theme.css
@@ -70,71 +70,69 @@
   border-bottom: 1px solid var(--theme-splitter-color) !important;
 }
 
 /* Add a negative bottom margin to overlap bottom border
   of the parent element (see also the next comment for 'tabs') */
 .theme-firebug .devtools-tab,
 .theme-firebug .devtools-sidebar-tabs tab {
   margin: 3px 0 -1px 0;
-  padding: 2px 4px 0 4px;
+  padding: 1px 4px !important;
   border: 1px solid transparent !important;
+  border-bottom: none !important;
   border-radius: 4px 4px 0 0;
   font-weight: bold;
   color: var(--theme-body-color);
   -moz-box-flex: initial;
   min-width: 0;
 }
 
-.theme-firebug .devtools-tab span {
-  padding-inline-end: 0;
+/* For toolbox tabs, the negative margin is applied on the container
+   instead of the tab to avoid triggering y-overflow on the container
+   that causes the overflow menu to display */
+
+.theme-firebug .devtools-tab {
+  margin-bottom: 0;
 }
 
-/* Tweak the margin and padding values differently for sidebar and the main tab bar */
-.theme-firebug .devtools-tab,
-.theme-firebug .devtools-tab.selected {
-  padding: 2px 4px 0 4px;
-  margin: 3px 1px -1px;
+.theme-firebug .toolbox-tabs,
+.theme-firebug #toolbox-option-container {
+  margin-bottom: -1px;
 }
 
-.theme-firebug .devtools-sidebar-tabs tab {
-  margin: 3px 0 -1px 0;
+.theme-firebug .devtools-tab span {
+  padding-inline-end: 0;
 }
 
 /* In order to hide bottom-border of side panel tabs we need
  to make the parent element overflow visible, so child element
  can move one pixel down to hide the bottom border of the parent. */
 .theme-firebug .devtools-sidebar-tabs tabs {
   overflow: visible;
 }
 
 .theme-firebug .devtools-tab:hover,
 .theme-firebug .devtools-sidebar-tabs tab:hover {
-  border: 1px solid #C8C8C8 !important;
-  border-bottom: 1px solid transparent;
+  border-color: #C8C8C8 !important;
 }
 
 .theme-firebug .devtools-tab.selected,
 .theme-firebug .devtools-sidebar-tabs tab[selected] {
   background-color: var(--theme-toolbar-tab-selected-background);
-  border: 1px solid var(--theme-splitter-color) !important;
+  border-color: var(--theme-splitter-color) !important;
   border-bottom-width: 0 !important;
   padding-bottom: 2px;
   color: inherit;
 }
 
 .theme-firebug .devtools-tabbar .devtools-separator,
 .theme-firebug .devtools-tab img {
   display: none;
 }
 
-.theme-firebug .toolbox-tab label {
-  margin: 0;
-}
-
 .theme-firebug .devtools-sidebar-tabs tab label {
   margin: 2px 0 0 0;
 }
 
 /* Use different padding for labels inside tabs on Win platform.
   Make sure this overrides the default in global.css */
 :root[platform="win"].theme-firebug .devtools-sidebar-tabs tab label {
   margin: 0 4px !important;

--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -47,22 +47,16 @@
   border: 0px solid;
   border-bottom-width: 1px;
   padding: 0;
   background: var(--theme-tab-toolbar-background);
   border-bottom-color: var(--theme-splitter-color);
   display: flex;
 }
 
-.toolbox-tabs {
-  margin: 0;
-  flex: 1;
-  overflow: hidden;
-}
-
 .toolbox-tabs-wrapper {
   position: relative;
   display: flex;
   flex: 1;
 }
 
 .toolbox-tabs-wrapper .all-tools-menu {
   border-inline-end: 1px solid var(--theme-splitter-color);
@@ -72,16 +66,19 @@
 
 .toolbox-tabs {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
+  margin: 0;
+  flex: 1;
+  overflow: hidden;
 }
 
 /* Set flex attribute to Toolbox buttons and Picker container so,
    they don't overlap with the tab bar */
 #toolbox-buttons-start,
 #toolbox-buttons-end {
   display: flex;
   align-items: stretch;