Refined-github: `more-dropdown` compatibility with "Repository refresh" design

[fregante]

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

[aminya]

Not sure if these errors are related to this, but I get them in the new design:

[yakov116]

@aminya thats https://github.com/sindresorhus/refined-github/issues/3081

[fregante]

Is it possible to have the dropdown on the bar, but when it "overflows" its contents end up in the native dropdown?

E.g.

Wide viewport
 _________________________________________________________________________
|                                                                         |
| Code - Issues - Pull requests - Actions - [ More ▼ ]                    |
|                                            Commits                      |
|                                            Branches                     |
|                                            Compare                      |
|_________________________________________________________________________|

Becomes

Small viewport
 ___________________________________________
|                                           |
| Code - Issues - Pull requests - [ ... ]   |
|                                 Actions   |
|                                 Commits   |
|                                 Branches  |
|                                 Compare   |
|___________________________________________|

[kidonng]

Is it possible to have the dropdown on the bar, but when it "overflows" its contents end up in the native dropdown?

Isn't this what we have in #3186?

[notlmn]

We can start by adding a max-width to .js-repo-nav, but that still keeps the dropdown trigger to the right.

There's some layout issues using position: relative on nav, and there's also figuring out max-width in the first place.

Just some thoughts.

[fregante]

I like the max-width solution, but it’s a little risky because other extensions add tabs too.

@kidonng yes, but that’s just 1 item out, 1 item in. I’m talking about 1 item out (the More dropdown) and 5 items in (once it overflows): could that work?

[kidonng]

I underestimated the problem. Just navigated through GitHub's code:

So insert all the .js-responsive-underlinenav-item before the listener is added? Impossible. Hook window.addEventlistner? Dirty. Make another listener? Tedious and error-prone. Well, I don't really have more ideas.

[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.