From 0f397cd9b04aa5a72f7e6eb433ec211f6f11dcd5 Mon Sep 17 00:00:00 2001
From: Lane Sawyer <github@lanesawyer.dev>
Date: Thu, 9 Jul 2026 07:21:56 -0700
Subject: [PATCH] fix(nav): prevent icon jump on sidebar close (#8866)

---
 src/app/core-ui/magic-side-nav/magic-side-nav.component.ts   | 4 +++-
 .../core-ui/magic-side-nav/nav-item/nav-item.component.scss  | 5 ++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/core-ui/magic-side-nav/magic-side-nav.component.ts b/src/app/core-ui/magic-side-nav/magic-side-nav.component.ts
index fcf3d6e73b..7e5d66ae60 100644
--- a/src/app/core-ui/magic-side-nav/magic-side-nav.component.ts
+++ b/src/app/core-ui/magic-side-nav/magic-side-nav.component.ts
@@ -39,7 +39,9 @@ import { HISTORY_STATE } from '../../app.constants';
 import { SwipeDirective } from '../../ui/swipe-gesture/swipe.directive';
 import { DataInitStateService } from '../../core/data-init/data-init-state.service';
 
-const COLLAPSED_WIDTH = 64;
+// 56px = 24px icon + 16px (var(--s2)) padding on each side, so the left-aligned
+// nav icons sit centered in the collapsed rail.
+const COLLAPSED_WIDTH = 56;
 const MOBILE_NAV_WIDTH = 300;
 const FOCUS_DELAY_MS = 10;
 const INITIAL_ENTER_ANIMATION_DURATION_MS = 425;
diff --git a/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.scss b/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.scss
index d1e176a0e4..1bf3c1b084 100644
--- a/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.scss
+++ b/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.scss
@@ -294,8 +294,7 @@ button[mat-menu-item].nav-link.active {
 
 :host-context(.nav-sidenav.compactMode) {
   .nav-link {
-    justify-content: center;
-    padding: 12px;
+    justify-content: flex-start;
 
     &:focus,
     &:hover {
@@ -305,7 +304,7 @@ button[mat-menu-item].nav-link.active {
 
     ::ng-deep .mat-mdc-menu-item-text {
       display: flex;
-      justify-content: center;
+      justify-content: flex-start;
       width: 100%;
       padding: 0;