JCU/fix(root): resolve the admin-sidebar gutter in CSS, not in an animation (#1496)

Backport of #1333, already on customer/TUL, customer/lindat and
customer/mendelu. Written for this branch rather than cherry-picked.

@slideSidebarPadding reads the gutter width from the browser-only CSS-variable store, so the server
has nothing to substitute and renders style="padding-left: *", which is not valid CSS. For a
logged-in user the browser then resolves the real width and the page moves right by the sidebar.
That is visible on every reload, and all the more so now that the anti-flicker overlay holds the
server's paint on screen while it happens.

The gutter now comes from a ds-admin-sidebar-{hidden,unpinned,pinned} class whose padding-left reads
--ds-admin-sidebar-fixed-element-width / --ds-admin-sidebar-total-width. CSS resolves those the same
on the server and in the browser, so there is nothing left to shift and no width is hardcoded. The
pin/unpin slide survives as transition: padding-left, gated behind ds-admin-sidebar-animate, which is
added only after the first paint so the initial resolution never animates.

Measured on the docker stack, logged in, reloading /home: outer-wrapper padding-left goes from
"padding-left: *" (computed 0px, sidebar overlapping the content) to 55px, identical in the SSR
snapshot and the live app, and the horizontal position of #main-content no longer moves at all.

Refs: dataquest-dev/dspace-customers#717

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: milanmajchrak

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,27 @@
     top: 0;
   }
 }
+
+// Admin-sidebar left gutter, driven by the ds-admin-sidebar-* class from sidebarPaddingState$ rather
+// than the @slideSidebarPadding animation. The animation read the width from a browser-only store, so
+// the server emitted `padding-left: *` and the page moved sideways once the browser resolved it.
+// Resolving from the custom properties in CSS renders the same on both sides, with no hardcoded px.
+.outer-wrapper {
+  &.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);
+  }
+
+  // Only genuine pin/unpin toggles slide: the class is added after the first paint, so the initial
+  // gutter never animates behind the anti-flicker overlay.
+  &.ds-admin-sidebar-animate {
+    transition: padding-left 300ms ease-in-out;
+  }
+}

src/app/root/root.component.ts

@@ -3,6 +3,7 @@ import {
   NgClass,
 } from '@angular/common';
 import {
+  AfterViewInit,
   Component,
   Inject,
   Input,
@@ -38,7 +39,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';
@@ -52,7 +52,6 @@ import { SystemWideAlertBannerComponent } from '../system-wide-alert/alert-banne
   selector: 'ds-base-root',
   templateUrl: './root.component.html',
   styleUrls: ['./root.component.scss'],
-  animations: [slideSidebarPadding],
   imports: [
     AsyncPipe,
     LiveRegionComponent,
@@ -68,12 +67,25 @@ import { SystemWideAlertBannerComponent } from '../system-wide-alert/alert-banne
     TranslateModule,
   ],
 })
-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>;
+
+  /**
+   * Which admin-sidebar gutter the outer wrapper should carry: 'hidden', 'unpinned' or 'pinned'.
+   * The width itself comes from CSS (see root.component.scss), so the server and the browser
+   * resolve it the same way.
+   */
+  sidebarPaddingState$: Observable<string>;
+
+  /**
+   * Lets the gutter transition run only after the first paint, so the initial resolution does not
+   * animate. Off on the server and on the first render; only pin/unpin toggles slide.
+   */
+  gutterTransitionEnabled = false;
   notificationOptions: INotificationBoardOptions;
   models: any;
 
@@ -129,11 +141,27 @@ export class RootComponent implements OnInit {
         startWith(true),
       );
 
+    // A CSS class instead of the @slideSidebarPadding animation: that animation needed a concrete
+    // width from the browser-only CSS-variable store, so the server rendered `padding-left: *` and
+    // the page moved sideways once the browser resolved the real width.
+    this.sidebarPaddingState$ = combineLatestObservable([this.isSidebarVisible$, this.slideSidebarOver$]).pipe(
+      map(([visible, over]: [boolean, boolean]) => !visible ? 'hidden' : over ? 'unpinned' : 'pinned'),
+    );
+
     if (this.router.url === getPageInternalServerErrorRoute()) {
       this.shouldShowRouteLoader = false;
     }
   }
 
+  ngAfterViewInit(): void {
+    // Browser only; requestAnimationFrame does not exist under SSR.
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(() => {
+        this.gutterTransitionEnabled = true;
+      });
+    }
+  }
+
   skipToMainContent() {
     const mainContent = document.getElementById('main-content');
     if (mainContent) {

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

@@ -11,7 +11,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';
@@ -23,7 +22,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],
   imports: [
     AsyncPipe,
     LiveRegionComponent,