From f52179363e30d12d12696fb6a9ae195b2df8d474 Mon Sep 17 00:00:00 2001
From: Thomas Kpenou <tomk@Mac-mini-de-Thomas.local>
Date: Thu, 25 Jun 2026 14:33:15 -0400
Subject: [PATCH] fix(ui): don't apply custom sidebar width to the mobile
 overlay

The resizable-sidebar width is persisted and was applied inline in every layout.
In the narrow/overlay layout (< 992px) a wide desktop width (e.g. 600px) made
the sliding sidebar wider than a phone screen when opened.

Apply the custom width only on desktop (via a sidebarStyle computed that returns
{} in narrow view); the overlay width is now CSS-driven (300px, max-width 85vw)
so it never overflows the viewport.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web-src/src/common/components/AppLayout.vue      | 16 +++++++++++++++-
 .../tests/unit/common/AppLayout_resize_test.js   | 14 ++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/web-src/src/common/components/AppLayout.vue b/web-src/src/common/components/AppLayout.vue
index aa13b708..f8564630 100644
--- a/web-src/src/common/components/AppLayout.vue
+++ b/web-src/src/common/components/AppLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-layout">
     <div ref="appSidebar" :class="{collapsed: !showSidebar}" class="app-sidebar shadow-8dp"
-         :style="{width: sidebarWidth + 'px'}">
+         :style="sidebarStyle">
       <slot name="sidebar"/>
     </div>
     <div v-show="!narrowView"
@@ -74,6 +74,15 @@ export default {
       sidebarWidth: DEFAULT_SIDEBAR_WIDTH
     }
   },
+
+  computed: {
+    sidebarStyle() {
+      // The custom (resizable) width only applies to the desktop layout. In the
+      // narrow/overlay layout the width is set by CSS (capped to the viewport),
+      // so a wide desktop width doesn't overflow a phone screen.
+      return this.narrowView ? {} : {width: this.sidebarWidth + 'px'};
+    }
+  },
   mounted() {
     this.sidebarWidth = loadSidebarWidth();
 
@@ -286,6 +295,11 @@ function updatedStylesBasedOnContent(contentHeader, contentPanel, appLayout) {
     height: 100vh;
     z-index: 999;
     transition: transform 0.3s;
+
+    /* Overlay width is viewport-driven here (the inline desktop width is not
+       applied in narrow view), so it never overflows a phone screen. */
+    width: 300px;
+    max-width: 85vw;
   }
 
   .app-sidebar.collapsed {
diff --git a/web-src/tests/unit/common/AppLayout_resize_test.js b/web-src/tests/unit/common/AppLayout_resize_test.js
index 9887ad04..511591df 100644
--- a/web-src/tests/unit/common/AppLayout_resize_test.js
+++ b/web-src/tests/unit/common/AppLayout_resize_test.js
@@ -107,4 +107,18 @@ describe('Test AppLayout resizable sidebar', function () {
         layout = mountLayout();
         expect(layout.find('.sidebar-resizer').exists()).toBe(true);
     });
+
+    it('does not apply the custom width in narrow (overlay) view', async function () {
+        vi.stubGlobal('localStorage', inMemoryLocalStorage({[KEY]: '600'}));
+        layout = mountLayout();
+
+        // Desktop: width applied inline.
+        expect(layout.vm.sidebarStyle).toEqual({width: '600px'});
+
+        // Narrow/overlay: width is left to CSS so it can't overflow the screen.
+        layout.vm.narrowView = true;
+        await layout.vm.$nextTick();
+        expect(layout.vm.sidebarStyle).toEqual({});
+        expect(layout.find('.app-sidebar').attributes('style') || '').not.toContain('width: 600px');
+    });
 });