feat(mobile-ux): optimize layout synchronization and stabilize D3 knowledge graph on mobile viewports

src/NexusReader.UI.Shared/Layout/ReaderLayout.razor

@@ -282,6 +282,7 @@
 
     private string _platformClass = "platform-desktop";
     private bool _isMobile = false;
+    private DotNetObjectReference<ReaderLayout>? _selfReference;
 
     protected override void OnInitialized()
     {
@@ -370,6 +371,47 @@
             {
                 Logger.LogError(ex, "Failed to initialize layout resizer JS module.");
             }
+
+            await InitViewportDetectionAsync();
+        }
+    }
+
+    private async Task InitViewportDetectionAsync()
+    {
+        try
+        {
+            _selfReference = DotNetObjectReference.Create(this);
+            var isMobileViewport = await JS.InvokeAsync<bool>("eval", "window.innerWidth < 768");
+            await OnViewportChanged(isMobileViewport);
+
+            await JS.InvokeVoidAsync("eval", @"
+                window.registerViewportObserver = (dotNetHelper) => {
+                    let currentIsMobile = window.innerWidth < 768;
+                    window.addEventListener('resize', () => {
+                        let isMobile = window.innerWidth < 768;
+                        if (isMobile !== currentIsMobile) {
+                            currentIsMobile = isMobile;
+                            dotNetHelper.invokeMethodAsync('OnViewportChanged', isMobile);
+                        }
+                    });
+                }
+            ");
+            await JS.InvokeVoidAsync("registerViewportObserver", _selfReference);
+        }
+        catch (Exception ex)
+        {
+            Logger.LogWarning(ex, "Failed to initialize viewport detection.");
+        }
+    }
+
+    [JSInvokable]
+    public async Task OnViewportChanged(bool isMobile)
+    {
+        if (_isMobile != isMobile)
+        {
+            _isMobile = isMobile;
+            _platformClass = _isMobile ? "platform-mobile" : "platform-desktop";
+            await InvokeAsync(StateHasChanged);
         }
     }
 
@@ -383,5 +425,6 @@
         InteractionService.OnNodeSelected -= HandleNodeSelectedAsync;
         InteractionService.OnAssistantRequested -= HandleAssistantRequestedAsync;
         GraphService.OnGraphUpdated -= HandleGraphUpdatedAsync;
+        _selfReference?.Dispose();
     }
 }

src/NexusReader.UI.Shared/Layout/ReaderLayout.razor.css

@@ -506,7 +506,7 @@ main {
 }
 
 .platform-mobile .nexus-mobile-reader-tabs {
-    display: block;
+    display: none; /* Keep hidden by default */
     width: 100vw;
     height: calc(100vh - 60px);
     position: absolute;
@@ -517,6 +517,11 @@ main {
     z-index: 15;
 }
 
+.app-container.platform-mobile.active-mobile-tab-graph .nexus-mobile-reader-tabs,
+.app-container.platform-mobile.active-mobile-tab-insight .nexus-mobile-reader-tabs {
+    display: block; /* Show only when graph or insight tabs are active */
+}
+
 .nexus-mobile-tab-content {
     display: none;
     width: 100%;