`more-dropdown` compatibility with "Repository refresh" design

more-dropdown is kind of a problem now since the new design has an automatic “overflow” hamburger menu:

The obvious solution is to add all those elements to the navigation and let them naturally flow into the overflow, but that’s noisy.

Until now we added items to the dropdown without much trouble, since it was “out of the way”, but this change forces us to reconsider it.

_Originally posted by @fregante in https://github.com/sindresorhus/refined-github/issues/3081#issuecomment-641942885_

cc @sindresorhus

[fregante]

GitHub’s selectors are “live”, so new elements are automatically picked up.

I looked into it just now and it looks somewhat possible:

• The link on the horizontal nav is a different DOM element from the one in the native dropdown

  nav
  	a[data-tab-item="issues-tab"]
  
  	.js-responsive-underlinenav-overflow
  		li[data-tab-item="issues-tab"]
  

• These 2 links are connected by the data-tab-item attribute
  • when [data-tab-item="insights-tab"] is hidden from the nav, the other element in the dropdown with the same attribute is shown
• items are removed from the nav regardless of whether they have a matching item in the dropdown (I think as long as they have the js-responsive-underlinenav-item class)

Given this, I think that this could be a solution:

nav
	a[data-tab-item="issues-tab"]
	.more-dropdown.js-responsive-underlinenav-item
		a[data-tab-item="dependencies"]
		a[data-tab-item="commits"]

	.js-responsive-underlinenav-overflow
		li[data-tab-item="issues-tab"]
		li[data-tab-item="dependencies"]
		li[data-tab-item="commits"]

[kyleknighted]

My biggest concern was with the non-centering aspect. I just created a little CSS snippet and it seems to keep everything intact during each media query resize

.UnderlineNav-body {
    width: 100% !important;
	max-width: 1280px !important;
    justify-content: space-between !important;
	margin: 0 auto !important;
	padding-left: 4px !important;
	padding-right: 4px !important;
}
@media (min-width:768px){
	.UnderlineNav-body {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
}
@media (min-width:1012px){
	.UnderlineNav-body {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

The max-width comes from container-xl class The padding sizes come from px-lg-3, px-md-2, and px-1 classes Everything may not need !important, I was just being overly sure the styles took.

Sorry if this isn’t exactly what you were wanting to accomplish with this Issue, but wanted to share in case it helped solve anyone else’s concerns.

Mods, feel free to delete if it doesn’t properly help the discussion.