[Suggestion] Decrease padding in all types of popup menus

[BlitW0]

Popup menus have a lot of unnecessary padding around all options, which is a little hassle while navigating through webpages because the cursor needs to be moved further than expected. It also wastes space since the font of the items in the menu is not that large, as is evident from the hovered item in the attached screenshot.

[hotgluebanjo]

Definitely agree. Here's a workaround for the right-click menu from u/yawn_zz on reddit: Go to your profile folder > chrome > popup and edit the "popup.css" file. Then put this at the top:

menupopup,
context-navigation
{ 
    -moz-appearance: none!important;
    background-color: #2E3440C0 !important;
    color: var(--nords-2) !important; 
    border-radius: 15px !important;
    border-color: var(--nordp-2) !important;
    }
context-navigation {
    background-color: #8ad !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;}
menupopup > menuseparator {display: none !important}

This should help with the right click menu at least. Here's how it looks.

[BlitW0]

I made some changes(in a pretty hacky way), and I think it largely removes the padding problem without making the clicking targets too small. Posting the changes here for anyone interested(Go to firefox profile folder > chrome folder):

• In popup.css

.popup-internal-box,
panel[type="autocomplete-richlistbox"] > .autocomplete-richlistbox,
.menupopup-arrowscrollbox
{
	padding: 4px 0 !important; /* modded, original = 8px 0 */ 
}

menupopup menuseparator
{
	margin: 2px 0 !important; /* modded, original = 8px 0 */
}

menupopup menuitem,
menupopup menu,
.autocomplete-richlistitem
{
	height: 28px !important; /* modded, original = 32px */
}

.menu-iconic-icon
{
	padding: 2px !important; /* modded, original = 4px */
}

/* .subview-subheader, */
panelview .toolbarbutton-1,
.subviewbutton,
.widget-overflow-list .toolbarbutton-1,
.panel-banner-item
{
	min-height: 28px !important; /* modded, original = 32px */
}

.subviewbutton .toolbarbutton-icon,
.panel-banner-item .toolbarbutton-icon
{
	padding: 2px !important; /* modded, original = 4px */
}

/* modded */
#context-navigation
{
	height: 32px !important;
	margin-bottom: 2px !important;
	padding-bottom: 0px !important;
	padding-top: 2px !important;
}
/* /modded */

Here are the results:

• Some extra misc. changes in global.css

/* Some tooltips can't be changed without javascript, for ex. addon tooltips */
tooltip
{
    -moz-appearance: none !important;
    color: white !important;
    background-color: var(--lwt-accent-color) !important;
    border: 0.5px solid gainsboro !important;
}

#urlbar-input::selection
{
	color: white;
	background-color: cornflowerblue;
}

[CesarAPC]

hey guys, any suggestion as to making this a bit better?

[BlitW0]

I've moved to quietfox, it feels lighter and more customizable. Its not as complete as materialfox, but I like it more.