From 405265435dcf1c2e70af8d7c1c9f4d731bd821ae Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 10 Jun 2025 06:18:54 +0000
Subject: [PATCH] Fix: Prevent main content shift when desktop navbar is not
 persistent

This commit addresses an issue where the main content area would shift
to the right on desktop when the sidebar was opened, regardless of the
`desktopNavbarPersistent` setting.

The layout logic in `App.vue` has been updated so that the `md:pl-60`
class (which adds left padding to the main content area) is now
applied only when both `ui.sidebarOpen` and `ui.desktopNavbarPersistent`
are true.

This ensures that:
- If `desktopNavbarPersistent` is true, the sidebar will take up
  dedicated space, and the content will correctly shift.
- If `desktopNavbarPersistent` is false, the sidebar will overlay the
  content on desktop, and the main content will no longer shift.
---
 ui/src/App.vue               | 2 +-
 ui/src/stores/useRealtime.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 2183a0a..dd4e2d8 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -64,7 +64,7 @@ const transitionDurationStyle = computed(() => {
   <!-- wrapper: deja espacio para TopBar (pt-14 = 56px) y, en desktop, para NavBar (pl-60) -->
   <div :class="[
     'pt-14 min-h-screen transition-[padding-left] duration-200',
-    ui.sidebarOpen ? 'md:pl-60' : '',
+    (ui.sidebarOpen && ui.desktopNavbarPersistent) ? 'md:pl-60' : '',
     // The global style.css will handle base background and text color via body styling
     // but we can keep specific overrides here if needed or theme classes.
     // ui.theme === 'dark' ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900'
diff --git a/ui/src/stores/useRealtime.js b/ui/src/stores/useRealtime.js
index 1f272d7..bf3f8b3 100644
--- a/ui/src/stores/useRealtime.js
+++ b/ui/src/stores/useRealtime.js
@@ -64,7 +64,7 @@ export const useRealtimeStore = defineStore('realtime', {
       this._sse.onerror = () => {
         console.warn('SSE connection lost, reloading...');
       };
-    },
+    }
     clearBadgesForTable(table) {
       if (this.badges[table]) {
         this.badges[table].INSERT = false;