Thinner top bar in firefox

2026-01-24
Still holding steady with firefox (even though the worlds seems to run on Chrome/ium). By default, the top section of firefox is way too thick eating up precious screen real-estate This chrome fixes that (not perfect but good enough).
firefox-chrome-comparison
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* --- CORE VARIABLES --- */
:root {
    --tab-min-height: 26px !important;
    --urlbar-toolbar-height: 26px !important;
    --urlbar-height: 22px !important;
    --bookmark-bar-height: 22px !important;
    
    /* Override Firefox internal variables for Proton UI */
    --proton-tab-block-margin: 2px !important;
    --inline-tab-padding: 6px !important;
}

/* --- 1. TABS CONFIGURATION --- */
#tabbrowser-tabs {
    --tab-min-height: var(--tab-min-height) !important;
}

/* Prevent overflow from expanding height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    min-height: unset !important;
}

.tabbrowser-tab {
    min-height: var(--tab-min-height) !important;
}

.tab-stack {
    min-height: var(--tab-min-height) !important;
}

/* Tab Background - rounded corner preservation with minimal margin */
.tab-background {
    --tab-block-margin: 2px !important;
    padding: 2px 0 !important;
    margin-block: var(--tab-block-margin) !important;
}

/* Tab Content - Padding & Layout */
.tab-content {
    padding-block: 2px !important;
    padding-inline: var(--inline-tab-padding) !important;
}

.tab-label-container {
    height: auto !important;
    margin-block: 0 !important;
}

.tab-label {
    font-size: 14px !important;
    margin-block: 0 !important;
}

.tab-icon-stack {
    padding-block: 1px !important;
    margin-block: 0 !important;
}

#TabsToolbar {
    --toolbarbutton-inner-padding: 2px !important;
}

/* --- 2. URL BAR & NAVIGATION --- */
#nav-bar {
    height: var(--urlbar-toolbar-height) !important;
    min-height: var(--urlbar-toolbar-height) !important;
    max-height: var(--urlbar-toolbar-height) !important;
    padding-block: 0 !important;
    margin-block: 0 !important;
    overflow: clip !important;
    box-sizing: border-box !important;
}

#nav-bar-customization-target {
    height: var(--urlbar-toolbar-height) !important;
    max-height: var(--urlbar-toolbar-height) !important;
    overflow: clip !important;
}

#urlbar-container,
#search-container {
    height: var(--urlbar-toolbar-height) !important;
    max-height: var(--urlbar-toolbar-height) !important;
    padding-block: 2px !important;
    box-sizing: border-box !important;
}

#urlbar {
    height: var(--urlbar-height) !important;
    min-height: var(--urlbar-height) !important;
    max-height: var(--urlbar-height) !important;
    padding-block: 0 !important;
    margin-block: 0 !important;
    box-sizing: border-box !important;
}

/* Disable megabar expansion (breakout) when not focused/open */
#urlbar[breakout][breakout-extend] {
    --urlbar-height: var(--urlbar-height) !important;
    --urlbar-toolbar-height: var(--urlbar-toolbar-height) !important;
}

/* URL Input Styling */
#urlbar-input,
.urlbar-input-box {
    font-size: 14px !important;
    line-height: 1 !important;
    padding-block: 0 !important;
    margin-block: 0 !important;
}

#urlbar-background {
    border: none !important;
    box-shadow: none !important;
}

#urlbar-input-container {
    padding-block: 0 !important;
    margin-block: 0 !important;
}

/* Page Action Buttons (inside URL bar) */
#page-action-buttons {
    padding-block: 0 !important;
}

#page-action-buttons > .urlbar-page-action {
    padding: 1px !important;
}

/* Toolbar Buttons & Identity Icon */
#nav-bar .toolbarbutton-1 {
    padding-block: 0 !important;
    margin-block: 0 !important;
}

#nav-bar .toolbarbutton-1 > .toolbarbutton-icon {
    height: 16px !important;
    width: 16px !important;
    padding: 2px !important;
}

#identity-box {
    padding-block: 0 !important;
    margin-block: 0 !important;
}

/* --- 3. BOOKMARKS TOOLBAR --- */
#PersonalToolbar {
    height: var(--bookmark-bar-height) !important;
    min-height: var(--bookmark-bar-height) !important;
    max-height: var(--bookmark-bar-height) !important;
    padding-block: 0 !important;
    margin-block: 0 !important;
    overflow: clip !important;
    box-sizing: border-box !important;
}

#PersonalToolbar .bookmark-item {
    padding-block: 1px !important;
    margin-block: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

#PlacesToolbarItems {
    padding-block: 0 !important;
    margin-block: 0 !important;
}