Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

DashboardLayout: sticky sidebar sizes itself from sidebarHeight independently of sidebarTopOffset, so any non-zero offset pushes the panel's bottom off-viewport

Aperta
  • Qualcosa non va?
#1,843 0 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@NSTKrishna ci sta già lavorando.

Dal 16/9/2026.

  • #1846 di @NSTKrishna — aperta

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

Summary

DashboardLayout pins its sticky sidebar at sidebarTopOffset but sizes it from sidebarHeight, and the two are computed independently. sidebarHeight defaults to 100vh, so any caller that supplies a top offset and leaves the height alone gets a panel exactly sidebarTopOffset taller than the space it can occupy.

Because the panel is position: sticky, that overflow is not recoverable by scrolling: once pinned, its bottom sidebarTopOffset worth of content - including the end of its own internal scroll container - sits permanently below the viewport, and its header scrolls up under the page's navbar.

Where

DashboardLayout, the desktop (non-mobile) branch:

<Box sx={{ width: sidebarWidth, flexShrink: 0, position: "sticky",
           top: sidebarTopOffset, alignSelf: "flex-start",
           height: sidebarHeight, maxHeight: sidebarHeight }}>

with

sidebarTopOffset = "0",
sidebarHeight = "100vh"

The default pair is self-consistent (offset 0, height 100vh). Every non-zero offset breaks it, and nothing in the types or at runtime says so.

Reproduce

Render DashboardLayout with sidebarTopOffset="64px" and no sidebarHeight (the natural call for any app with a fixed navbar), open the sidebar above the md breakpoint, and scroll the page down. The sidebar's header leaves the top of the viewport and its last 64px never becomes reachable.

Measured, rather than eyeballed:

const rect = stickyPanel.getBoundingClientRect();
rect.height            // 1000 at a 1000px viewport
window.innerHeight - 64 // 936 - the space actually available

Suggested fix

Derive the default height from the offset the caller already gave:

sidebarHeight = `calc(100vh - ${sidebarTopOffset})`

An explicit sidebarHeight still wins, so this is backwards compatible for anyone who already worked around it, and it makes the zero-offset default behave exactly as it does today.

The alternative - documenting that callers must pass both - pushes the navbar height into two places in every consumer, where they can silently drift apart.

Consumer status

Worked around locally in layer5io/meshery-cloud#5992 by binding the navbar height once and deriving both props from it. That is a correct caller, not a fix: every other consumer that adopts sidebarTopOffset will hit the same thing first.

Lingua principale
TypeScript
Stelle
140
Fork
243
Merge medio
8g 17h
PR unite (30g)
5

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di layer5io/sistent

Tutte le issue di layer5io/sistent

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.