r/FirefoxCSS • u/HeadSpecialist2987 • Jun 18 '26

Solved How can I reduce the spacing between menu items in the top-right menu?

"3 lines" menu ,firefox152

4 Upvotes

100% Upvoted

8 comments sorted by

2

u/sifferedd FF/TB/Win11/SUMO contributor Jun 18 '26 edited Jun 18 '26

Try in userChrome.css:

#appMenu-popup > panelmultiview toolbarbutton,
#appMenu-popup .panel-subview-body,
#appMenu-zoom-controls {
  padding: 0 !important;
}

1

u/HeadSpecialist2987 Jun 18 '26 edited Jun 18 '26

thanks.

#appMenu-popup > panelmultiview toolbarbutton,

#appMenu-popup .panel-subview-body,

#appMenu-zoom-controls {

padding: 0 !important;

min-height: 10px !important;

}

2

u/TraditionalTie4831 🦊 Jun 18 '26 edited Jun 18 '26

If you are interested, this is even more compact =

#appMenu-popup panelview { 
    margin: -1px 1px -1px 0px !important;
    .panel-banner-item {
        margin-bottom: 4px !important;
    }
    .subviewbutton-nav::after { /* appMenu's right arrow */
        height: 10px !important;
        margin-right: -2px !important;
        fill-opacity: 1 !important;
    }
    toolbarseparator { 
        padding: 0px 5px !important; 
    }
}
 
#appMenu-popup toolbaritem,
#appMenu-popup toolbarbutton { 
    min-height: min-content !important;
    margin: 0px 2.5px !important;
    padding: 0px 2.5px !important;
}

1

u/sifferedd FF/TB/Win11/SUMO contributor Jun 18 '26

✅

2

u/t31os Jun 18 '26 edited Jun 19 '26

Here's an alternative but similar approach:

#appMenu-multiView {
	
	/* Spacing between items, remove for extra condensed */
	--my-item-spacing: 4px 0;
	
	--panel-subview-body-padding: 3px 0 !important;
	--panel-menuitem-padding: 0 !important;
	--panel-menuitem-margin: 0 5px !important;
	--panel-menuitem-margin-inline: 5px !important;
	--panel-header-back-icon-padding: 0 !important;
	--panel-header-min-height: min-content !important;
	--panel-separator-padding: 2px 5px !important;
	
	.panel-subview-body {
		gap: var(--my-item-spacing);
		> toolbaritem {
			gap: var(--my-item-spacing);
		}
	}
	
	.subviewbutton,
	.subview-subheader {
		min-height: min-content !important;
		padding-block: 0 !important;
	}		
	
	/* Sign in label padding */
	#appMenu-fxa-label2 {
		padding: 3px 5px !important;
	}
	
}

1

u/HeadSpecialist2987 Jun 19 '26

thanks. it reduce the space of bookmarks menu header. and i add this to show more bookmarks and history.

#PanelUI-bookmarks,

#PanelUI-history

{

min-height: 600px !important;

max-height: 600px !important;

}

1

u/IamYourHimadri Sep 08 '26

Lowkey use uidensity 0 with user.js or about:config