userChrome.css

Try this code for the height. Make sure that --tab-min-height has the same value in both places.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */


/* ---Tabs/Tab Bar height--- */


/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */
 --tab-min-height: 30px !important;
}
:root #tabbrowser-tabs {
 --tab-min-height: 30px !important;
}

#TabsToolbar {height: var(--tab-min-height) !important;}

#tabs-newtab-button { display: none;}

/*   Bookmarks bar folder icon style */

.bookmark-item > .toolbarbutton-icon[type="menu"], 
.bookmark-item[container="true"] .menu-iconic-icon {
	fill: #666666 !important;
	opacity: 0.5;
}

/* Bookmark bar fonts' */

#personal-bookmarks {
    font-size: 11px !important;
    color: rgba(0, 0, 0, 0.7) !important;
    font-weight: 400 !important;
}

/* SELECTED TAB BORDER THICKNESS */

:root .tabbrowser-tab:is([selected="true"]) { color: #444444 !important; }

:root .tabbrowser-tab:is([selected="true"]) > .tab-stack > .tab-background 
{ 
	box-shadow: 0px 0px 3px 0px rgba(217,217,217,0.9) !important;
}

:root .tabbrowser-tab
{
	letter-spacing: 0.01rem;
	font-size: 1.1rem !important;
	color: #676767 !important;
}

:root .tabbrowser-tab> .tab-stack > .tab-background 
{ 
	background: #e1e1e1;
}

:root .tabbrowser-tab[pinned]> .tab-stack > .tab-background 
{ 
	background: none;
}

/* Bookmark bar separator */

#PlacesToolbarItems > toolbarseparator {
   appearance: none !important;
   display: block !important;
   margin: 6px 0px 5px 9px !important;
   border-left: 1px solid ThreeDShadow !important;
}