From f9ffff4712d1906f578ad1684d7f8ee5fdb06e6d Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Fri, 23 Oct 2026 12:16:37 +0200
Subject: [PATCH] fix(core): center the sidenav logo in rail mode whatever its
 width

A logo wider than 32px sat left of the nav icons: the fixed ms-n1 offset only
fits 32px, and v-img's max-width: 100% shrank wide logos to the prepend slot.
The offset now follows header.logo.width and the width cap is lifted.

Claude-Session: https://claude.ai/code/session_014L5yjbtBZ8EVD7PaUHA53B
---
 .../core/components/core.navigation.component.vue    | 12 +++++++++++-
 .../tests/core.navigation.component.unit.tests.js    |  8 +++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/modules/core/components/core.navigation.component.vue b/src/modules/core/components/core.navigation.component.vue
index 060c1408d..2e023614c 100644
--- a/src/modules/core/components/core.navigation.component.vue
+++ b/src/modules/core/components/core.navigation.component.vue
@@ -39,7 +39,7 @@
               :alt="config.app.title"
               :width="config.header.logo?.width || '32px'"
               :height="config.header.logo?.width || '32px'"
-              class="ms-n1"
+              :style="logoOffsetStyle"
               inline
             ></v-img>
             <v-icon
@@ -188,6 +188,16 @@ export default {
     logoFile() {
       return this.config.header?.logo?.file || this.config.app.logoFile || null;
     },
+    /**
+     * @desc Keeps the logo centered in the rail whatever its configured width:
+     * the base -4px offset centers a 32px logo, wider ones are pulled back by half the extra width.
+     * `maxWidth: none` lifts v-img's `max-width: 100%`, which would shrink a wide logo to the rail's prepend slot.
+     * @returns {Object}
+     */
+    logoOffsetStyle() {
+      const width = this.config.header?.logo?.width || '32px';
+      return { marginInlineStart: `calc(-4px - (${width} - 32px) / 2)`, maxWidth: 'none' };
+    },
     /**
      * @desc Whether the liquid glass mode is enabled.
      * @returns {Boolean}
diff --git a/src/modules/core/tests/core.navigation.component.unit.tests.js b/src/modules/core/tests/core.navigation.component.unit.tests.js
index 0b9d47686..b201a7942 100644
--- a/src/modules/core/tests/core.navigation.component.unit.tests.js
+++ b/src/modules/core/tests/core.navigation.component.unit.tests.js
@@ -50,7 +50,7 @@ import CoreNavigation from '../components/core.navigation.component.vue';
  */
 const makeConfig = (overrides = {}) => ({
   app: { title: 'Test App', icon: 'fa-solid fa-cube', logoFile: null, ...(overrides.app || {}) },
-  header: { socials: [] },
+  header: { socials: [], ...(overrides.header || {}) },
   vuetify: {
     theme: {
       flat: false,
@@ -371,4 +371,10 @@ describe('core.navigation.component — sidenav logo', () => {
     const logoItemImg = wrapperImg.findAllComponents({ name: 'VListItem' })[0];
     expect(logoItemImg.props('to')).toBe('/');
   });
+
+  it('offsets the logo by half its extra width so it stays centered in the rail', () => {
+    const wrapper = mountNav({ configOverrides: { app: { logoFile: '/images/logo.svg' }, header: { logo: { width: '42px' } } } });
+    expect(wrapper.vm.logoOffsetStyle.marginInlineStart).toBe('calc(-4px - (42px - 32px) / 2)');
+    expect(wrapper.vm.logoOffsetStyle.maxWidth).toBe('none');
+  });
 });