SAV/Backport #1333: admin-sidebar gutter via CSS var (no logged-in reload shift)

[jr-rk]

Backport of #1333 (originally landed on customer/vsb-tuo) to sav. Part of the SSR anti-flicker family tracked in dataquest-dev/dspace-customers#717.

Problem

For an authenticated user, a hard reload shifted the whole page right by the admin-sidebar width the moment the SSR snapshot was removed. (Anonymous users were fine — no admin sidebar, no gutter.) The .outer-wrapper left gutter came from the @slideSidebarPadding animation, whose width is read from a browser-only CSS-variable store; on the server that store is empty so it rendered padding-left:0, then the browser resolved the real width and the page jumped.

Fix

Drive the gutter from a CSS class (ds-admin-sidebar-{hidden,unpinned,pinned}, set from a small sidebarPaddingState$) whose padding-left resolves from the admin-sidebar width custom properties in CSS — resolved identically on the server (snapshot) and the browser (live app), so no shift and no hardcoded px. The pin/unpin slide is preserved via transition: padding-left, gated behind ds-admin-sidebar-animate (enabled only after first browser paint) so the initial SSR→CSR gutter resolution doesn't animate.

This branch

Older DSpace 7.6.1 root.component (fields sidebarVisible/slideSidebarOver). Gutter resolves from this theme's --ds-collapsed-sidebar-width / --ds-total-sidebar-width.

Translate-not-transplant: re-derived against this branch's root.component generation, not a cherry-pick.

Verification

• Byte-level equivalence checks pass (diff matches the fix(ssr-overlay): render admin-sidebar gutter on the server so logged-in reload doesn't shift #1333 4-file shape).
• Production AOT build + visual check pending — CI runs the build; a layout shift can only be confirmed by a real-instance authenticated hard reload (CI can't see it).

Refs: dataquest-dev/dspace-customers#717, #1333

[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: 9f8121e0-dc52-4be3-a465-b3c844bf67de

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