MENDELU/Fix header/nav widget shift on SSR->CSR hydration

[MatusBeke]

Problem description

Home page (and other SSR-rendered pages) visibly flicker/shift on a hard reload. Reported as: page flickers, and content now also visibly shifts.

Root cause

Confirmed locally (Docker: DSpace 9.1 backend + production SSR build) with Playwright + a layout-shift PerformanceObserver, and cross-checked against a live measurement on the shared MENDELU dev instance:

• ds-auth-nav-menu (the "Admin Access" login button) and #desktop-navbar (<ds-navbar>, the top-level menu) are both recreated client-side by ThemedComponent on hydration — SSR content is discarded and the component re-instantiates from scratch (see src/app/shared/theme-support/themed.component.ts). Each briefly renders narrower/empty before settling back to its SSR-resolved width:
  • ds-auth-nav-menu's showAuth$ defaults to of(false) until ngOnInit re-subscribes to the router-store selector (src/app/shared/auth-nav-menu/auth-nav-menu.component.ts), so the button goes 0 → ~126px.
  • #desktop-navbar's menu items go through the same recreation and settle from ~339px → ~366px.
• #header-right is a flex-nowrap row pinned via justify-content:end inside a flex-grow #header-left/#header-right container, so either widget's width swing visibly shifts the search box next to it — measured as a Cumulative Layout Shift of ~0.21–0.36 on the affected loads.
• The anti-flicker overlay (src/index.html + AppComponent.removeSsrOverlayWhenContentVisible) usually masks this, but it's a timing race, not a guarantee — this is why it's visible in production sometimes but not every load.
• This showAuth$ = of(false) pattern is shared/common code (confirmed identical on customer/TUL and customer/vsb-tuo), so it's a latent bug everywhere — it's just that mendelu's header layout (this specific flex arrangement, absolutely-positioned search input) is what makes it visible, unlike the other customer themes.

Fix

CSS-only, scoped to mendelu's own theme (src/themes/custom/app/header/header.component.scss): reserve stable min-width for both widgets so the row's footprint never changes regardless of hydration timing —

• ds-auth-nav-menu: ~150px (covers "Admin Access" / "Admin přístup", the widest login-button label)
• #desktop-navbar: ~380px (covers mendelu's current 2-item top-level menu, ~366px measured, with headroom)

Both are documented in the SCSS as content-driven, non-upstream constants that should be remeasured if the menu changes.

Verification

Local Docker stack (DSpace 9.1 backend, production SSR build, seeded test data) — 16 total hard-reload samples across two independent measurement passes:

• Before the fix: #header-right appeared as a layout-shift source in the majority of runs, with widths jumping up to ~126px (auth widget) and positions shifting up to ~26.5px (pushed by the navbar).
• After the fix: #header-right did not appear as a layout-shift source in any of the 16 samples.

Known residual, out of scope for this PR: a separate, smaller layout shift (~24px vertical reflow of the homepage welcome paragraph) was observed in local testing. It is structurally unrelated to the ThemedComponent/hydration mechanism this PR fixes, was not part of the original reproduction on the live dev instance, and may be specific to the locally-seeded test content rather than production. Not fixed here; flagging for a possible follow-up.

Manual Testing

• Anonymous /home hard reload, repeated — header/search-box no longer visibly shifts
• Verified via automated CLS measurement (Playwright), not just visual inspection

Sync verification

No i18n changes in this PR.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 62b34eba-93c9-4700-bbee-a955c3201a30

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}