fix(ssr): drive admin-sidebar gutter via CSS var (no logged-in reload shift)

For an authenticated user a hard reload shifted the page right by the
admin-sidebar width when the SSR freeze-frame was removed: the
.outer-wrapper gutter came from the @slideSidebarPadding animation whose
width is read from a browser-only CSS-variable store, so the server
rendered padding-left:0 and the browser then resolved the real width.

Drive the gutter from a CSS class (ds-admin-sidebar-{hidden,unpinned,
pinned}) resolving padding-left from the --ds-admin-sidebar-* custom
properties, identically on server and browser. Pin/unpin slide preserved
via ds-admin-sidebar-animate, gated behind gutterTransitionEnabled
(enabled after first paint). Applied to the base root component and the
active datashare themed root.

Mirrors mendelu DSpace#1355 (backport of DSpace#1333). Refs
dataquest-dev/dspace-customers#717.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: jr-rk

src/app/root/root.component.html

@@ -2,10 +2,12 @@
   {{ 'root.skip-to-content' | translate }}
 </button>
 
-<div class="outer-wrapper" [class.d-none]="shouldShowFullscreenLoader" [ngClass]="browserOsClasses.asObservable() | async" [@slideSidebarPadding]="{
-     value: ((isSidebarVisible$ | async) !== true ? 'hidden' : (slideSidebarOver$ | async) ? 'unpinned' : 'pinned'),
-     params: { collapsedWidth: (collapsedSidebarWidth$ | async), expandedWidth: (expandedSidebarWidth$ | async) }
-    }">
+<div class="outer-wrapper" [class.d-none]="shouldShowFullscreenLoader"
+     [ngClass]="browserOsClasses.asObservable() | async"
+     [class.ds-admin-sidebar-animate]="gutterTransitionEnabled"
+     [class.ds-admin-sidebar-hidden]="(sidebarPaddingState$ | async) === 'hidden'"
+     [class.ds-admin-sidebar-unpinned]="(sidebarPaddingState$ | async) === 'unpinned'"
+     [class.ds-admin-sidebar-pinned]="(sidebarPaddingState$ | async) === 'pinned'">
   <ds-admin-sidebar [expandedSidebarWidth$]="expandedSidebarWidth$" [collapsedSidebarWidth$]="collapsedSidebarWidth$"></ds-admin-sidebar>
   <div class="inner-wrapper">
     <ds-system-wide-alert-banner></ds-system-wide-alert-banner>

src/app/root/root.component.scss

@@ -14,3 +14,31 @@
     top: 0;
   }
 }
+
+// Admin-sidebar left gutter. Driven by the `ds-admin-sidebar-*` class set in root.component.html (from
+// sidebarPaddingState$) rather than the @slideSidebarPadding Angular animation. The animation needed a
+// concrete width from the browser-only CSS-variable store, so on the server it rendered padding-left:0
+// and the authenticated page jumped right when the anti-flicker SSR snapshot was removed. Resolving the
+// gutter from the `--ds-admin-sidebar-*` custom properties in CSS instead renders identically on the
+// server (snapshot) and the browser (live app) — no hardcoded px, theme- and viewport-aware — and the
+// transition keeps the pin/unpin slide. 'hidden' (no admin sidebar) keeps the default padding-left: 0.
+.outer-wrapper {
+  // padding-left:0 (no admin sidebar); explicit for self-documentation.
+  &.ds-admin-sidebar-hidden {
+    padding-left: 0;
+  }
+
+  &.ds-admin-sidebar-unpinned {
+    padding-left: var(--ds-admin-sidebar-fixed-element-width);
+  }
+
+  &.ds-admin-sidebar-pinned {
+    padding-left: var(--ds-admin-sidebar-total-width);
+  }
+
+  // Slide only genuine pin/unpin toggles. The class is added after first paint (gutterTransitionEnabled)
+  // so the initial SSR->CSR gutter resolution behind the anti-flicker overlay never animates.
+  &.ds-admin-sidebar-animate {
+    transition: padding-left 300ms ease-in-out;
+  }
+}

src/app/root/root.component.ts

@@ -4,6 +4,7 @@ import {
   NgIf,
 } from '@angular/common';
 import {
+  AfterViewInit,
   Component,
   Inject,
   Input,
@@ -39,7 +40,6 @@ import {
 } from '../core/services/window.service';
 import { ThemedFooterComponent } from '../footer/themed-footer.component';
 import { ThemedHeaderNavbarWrapperComponent } from '../header-nav-wrapper/themed-header-navbar-wrapper.component';
-import { slideSidebarPadding } from '../shared/animations/slide';
 import { HostWindowService } from '../shared/host-window.service';
 import { LiveRegionComponent } from '../shared/live-region/live-region.component';
 import { ThemedLoadingComponent } from '../shared/loading/themed-loading.component';
@@ -53,7 +53,6 @@ import { SystemWideAlertBannerComponent } from '../system-wide-alert/alert-banne
   selector: 'ds-base-root',
   templateUrl: './root.component.html',
   styleUrls: ['./root.component.scss'],
-  animations: [slideSidebarPadding],
   standalone: true,
   imports: [
     TranslateModule,
@@ -71,12 +70,30 @@ import { SystemWideAlertBannerComponent } from '../system-wide-alert/alert-banne
     LiveRegionComponent,
   ],
 })
-export class RootComponent implements OnInit {
+export class RootComponent implements OnInit, AfterViewInit {
   theme: Observable<ThemeConfig> = of({} as any);
   isSidebarVisible$: Observable<boolean>;
   slideSidebarOver$: Observable<boolean>;
   collapsedSidebarWidth$: Observable<string>;
   expandedSidebarWidth$: Observable<string>;
+
+  /**
+   * The admin-sidebar padding state ('hidden' | 'unpinned' | 'pinned') used to drive the
+   * outer-wrapper's left gutter via CSS classes (see root.component.scss) instead of an Angular
+   * animation. CSS resolves the gutter width from the `--ds-admin-sidebar-*` custom properties, so it
+   * is rendered identically on the server (the anti-flicker SSR snapshot) and the browser (the live
+   * app) — no browser-only CSS-variable read, no hardcoded px, and it stays theme- and viewport-aware.
+   */
+  sidebarPaddingState$: Observable<string>;
+
+  /**
+   * Enables the gutter's `transition: padding-left` only AFTER the first browser paint. The initial
+   * SSR->CSR gutter resolution happens behind the anti-flicker overlay; without this gate a plain CSS
+   * transition would animate that initial 0->gutter change (the overlay settle detector only watches
+   * DOM mutations, not style changes), which could leak a 300ms slide right as the overlay is removed.
+   * Off on the server and on first render, so only genuine pin/unpin toggles animate.
+   */
+  gutterTransitionEnabled = false;
   notificationOptions: INotificationBoardOptions;
   models: any;
 
@@ -132,11 +149,28 @@ export class RootComponent implements OnInit {
         startWith(true),
       );
 
+    // Drive the outer-wrapper gutter via a CSS class instead of the @slideSidebarPadding animation: the
+    // animation needs a concrete width from the browser-only CSS-variable store, so on the server it
+    // rendered padding-left:0 and the authenticated page jumped right when the SSR snapshot was removed.
+    // The CSS class resolves the gutter from `--ds-admin-sidebar-*` (see root.component.scss), identically
+    // on server and browser — fixing the jump without any hardcoded width.
+    this.sidebarPaddingState$ = combineLatestObservable([this.isSidebarVisible$, this.slideSidebarOver$]).pipe(
+      map(([visible, over]) => !visible ? 'hidden' : over ? 'unpinned' : 'pinned'),
+    );
+
     if (this.router.url === getPageInternalServerErrorRoute()) {
       this.shouldShowRouteLoader = false;
     }
   }
 
+  ngAfterViewInit(): void {
+    // Enable the gutter slide only after the first paint (browser only; requestAnimationFrame is not
+    // defined under SSR), so the initial padding resolution never animates — see gutterTransitionEnabled.
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(() => { this.gutterTransitionEnabled = true; });
+    }
+  }
+
   skipToMainContent() {
     const mainContent = document.getElementById('main-content');
     if (mainContent) {

src/themes/datashare/app/root/root.component.ts

@@ -12,7 +12,6 @@ import { ThemedBreadcrumbsComponent } from '../../../../app/breadcrumbs/themed-b
 import { ThemedFooterComponent } from '../../../../app/footer/themed-footer.component';
 import { ThemedHeaderNavbarWrapperComponent } from '../../../../app/header-nav-wrapper/themed-header-navbar-wrapper.component';
 import { RootComponent as BaseComponent } from '../../../../app/root/root.component';
-import { slideSidebarPadding } from '../../../../app/shared/animations/slide';
 import { LiveRegionComponent } from '../../../../app/shared/live-region/live-region.component';
 import { ThemedLoadingComponent } from '../../../../app/shared/loading/themed-loading.component';
 import { NotificationsBoardComponent } from '../../../../app/shared/notifications/notifications-board/notifications-board.component';
@@ -24,7 +23,6 @@ import { SystemWideAlertBannerComponent } from '../../../../app/system-wide-aler
   styleUrls: ['../../../../app/root/root.component.scss'],
   // templateUrl: './root.component.html',
   templateUrl: '../../../../app/root/root.component.html',
-  animations: [slideSidebarPadding],
   standalone: true,
   imports: [
     TranslateModule,