Analysis

Current structure on issue detail (same pattern on build / PR detail):

.card.issue-detail
  .card-header
    .card-title
    a.more-info.side-info          <!-- Element B -->
  .card-body.d-flex
    .main
      …operations / primary…
      ul.tabs.nav-tabs-sticky      <!-- Element A: position:sticky; top:0; z-index:990 -->
      …tab content…
    div.side-info                  <!-- SideInfoPanel -->

Sticky on .tabs works because it lives inside the scrolling .main / .autofit chain. Sticky on .more-info cannot work while it stays under .card-header: once the header scrolls off, sticky is clipped by that ancestor. Existing CSS already hides triggers when the pane is open (.side-info-visible a.side-info { display: none }), and PR summary links already proxy-click the header trigger (pull-request-detail.js).

Tabbable already has a right-aligned .options slot (margin-left: auto), but it is owned by the selected tab’s renderOptions() — not a good place for a page-level more-info control without API changes.

1. Technical strategy (recommended)

Recommended: sticky tabs row wrapper + second SideInfoLink + IntersectionObserver

Why A: Default state keeps Element B in .card-header and Element A as the tab list. Only when the header trigger leaves the scrollport do we show a second trigger that already lives inside the sticky row, so it docks at top: 0 beside the tabs with no fixed-position bookkeeping.

2. Step-by-step implementation

Step 1 — Markup (e.g. IssueDetailPage.html)

Wrap tabs + docked trigger; move sticky to the wrapper so both stick together. Keep the original header link unchanged:

<div class="card-header d-flex align-items-center flex-nowrap">
  <div wicket:id="title" class="card-title flex-grow-1 mx-0"></div>
  <a wicket:id="moreInfo" class="more-info side-info flex-shrink-0 ml-3"
     t:data-tippy-content="More info">…</a>
</div>
…
<div class="sticky-tabs-row d-flex align-items-center mb-5">
  <ul wicket:id="issueTabs"
      class="tabs nav nav-tabs nav-tabs-line nav-bold flex-grow-1 mb-0"></ul>
  <a wicket:id="moreInfoDock"
     class="more-info side-info more-info-dock flex-shrink-0 ml-3"
     t:data-tippy-content="More info">…</a>
</div>

• Remove nav-tabs-sticky from the ul (sticky moves to the row).
• Default: .more-info-dock is hidden (see CSS), so the unscrolled layout matches today.

Mirror on BuildDetailPage / PullRequestDetailPage (same header + sticky tabs pattern).

Step 2 — Java

Add a second SideInfoLink("moreInfoDock") next to the existing SideInfoLink("moreInfo"). Both broadcast SideInfoOpened; no click proxying required (unlike PR summary text links).

Step 3 — CSS (base.css or page CSS)

.sticky-tabs-row {
  position: sticky;
  top: 0;
  z-index: 990;
  /* reuse existing sticky tab chrome */
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.dark-mode .sticky-tabs-row {
  background: rgba(35, 35, 45, 0.88);
}
/* hidden until docked — preserves default layout */
.sticky-tabs-row > .more-info-dock {
  display: none;
}
.sticky-tabs-row.is-docked > .more-info-dock {
  display: inline-flex;
}
/* keep existing: body.side-info-visible a.side-info { display: none } */
html:has(.revision-diff) .sticky-tabs-row {
  position: static; /* same exception as today’s sticky tabs on PR changes */
}

Optionally move the existing .nav-tabs-line.nav-tabs-sticky rules onto .sticky-tabs-row so all sticky-tab pages share one definition.

Step 4 — JS (IntersectionObserver)

Observe the header trigger against the real scroll root (the nearest scrolling ancestor, typically the .autofit scroller — not viewport alone):

onedev.server.sideInfo.dockMoreInfoWithStickyTabs = function(options) {
  var $root = $(options.root);
  var header = $root.find(options.headerTrigger)[0];
  var $row = $root.find(options.stickyRow);
  if (!header || !$row.length) return;

  var scrollRoot = $row.closest(".autofit")[0] || null;
  var observer = new IntersectionObserver(function(entries) {
    var visible = entries[0].isIntersecting;
    $row.toggleClass("is-docked", !visible);
  }, { root: scrollRoot, threshold: 0 });

  observer.observe(header);
};

Call from page onDomReady (and after Ajax refreshes that replace the header/tabs).

Stuck detection: “header more-info not intersecting” ≈ “tabs have reached sticky” for this layout, because the header sits above the tabs. If pixel-perfect stick detection is needed, observe a 1px sentinel placed immediately above .sticky-tabs-row instead.

Step 5 — Collision / alignment

• Row is display: flex; tabs flex-grow-1; dock flex-shrink-0 + ml-3 — same spacing as the header control.
• Tabs keep wrapping (flex-wrap on the ul if needed); dock stays on the right of the row.
• No padding-right hack required because the dock participates in flex layout only while .is-docked is on (when hidden via display: none it takes no space).

Step 6 — Transitions & edge cases

3. Proposed code touch points (diff outline)

No code landed in this answer (Question). Implementation would touch roughly:

1. IssueDetailPage.html (+ Build/PR detail HTML) — sticky row + moreInfoDock
2. IssueDetailPage.java (+ Build/PR) — new SideInfoLink("moreInfoDock")
3. base.css — .sticky-tabs-row / .is-docked (lift styles off .nav-tabs-sticky)
4. side-info.js — shared dockMoreInfoWithStickyTabs
5. issue-detail.js / pull-request-detail.js / build detail JS — call helper from onDomReady

If this plan looks right, we can open an implementation issue / convert follow-up work from this. If you want a different approach (fixed overlay, or always-visible dock in the tab bar), say which and we can adjust.

See #2969 for implementation