From 326caa51cec828b1eef4a951440a7857efdc4941 Mon Sep 17 00:00:00 2001
From: boban <boban.blaskovic@gmail.com>
Date: Sat, 16 May 2026 18:55:26 +0200
Subject: [PATCH] fix(bug-1): eliminate content-area overlap on hard-reload
 with collapsed sidebar

Add .nim-content class to main content div and pre-Alpine CSS rules:
- @media min-width:768px .nim-content { margin-left:240px }
- html[data-sidebar-collapsed] .nim-content { margin-left:64px }

The blocking script (FIX-13) already sets data-sidebar-collapsed before first
paint; the new CSS applies the matching margin before Alpine initializes.
Also fix skel-topbar left position for collapsed state (was always 240px).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/views/layouts/nimuli-app.blade.php | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/resources/views/layouts/nimuli-app.blade.php b/resources/views/layouts/nimuli-app.blade.php
index beb6220..5655843 100644
--- a/resources/views/layouts/nimuli-app.blade.php
+++ b/resources/views/layouts/nimuli-app.blade.php
@@ -88,6 +88,11 @@
             z-index: 10;
         }
         html[data-sidebar-collapsed] .skel-sidebar { width: 64px; }
+        html[data-sidebar-collapsed] .skel-topbar { left: 64px; }
+        @media (min-width: 768px) {
+            .nim-content { margin-left: 240px; }
+            html[data-sidebar-collapsed] .nim-content { margin-left: 64px; }
+        }
         body.app-ready .app-spinner,
         body.app-ready .skel-sidebar,
         body.app-ready .skel-topbar { display: none; }
@@ -126,7 +131,7 @@
 
         <!-- Main content area: shifts right based on sidebar width -->
         <div
-            class="flex flex-col min-h-screen transition-[margin-left] duration-200 ease-in-out"
+            class="nim-content flex flex-col min-h-screen transition-[margin-left] duration-200 ease-in-out"
             :class="$store.sidebar?.collapsed ? 'md:ml-16' : 'md:ml-60'"
         >
             @persist('topbar')