feat: Mobile-First Layout Redesign & D3.js Graph Stabilization (#58)

This PR implements a comprehensive mobile-first design overhaul for the Reader, Dashboard, and Navigation layouts.

### Key Accomplishments
1. **Dynamic Viewport Synchronization**: Installed robust `ResizeObserver` listener on the client side with automatic reactive toggling of `platform-mobile`/`platform-desktop` CSS classes.
2. **Tab Controller & Visibility Fixes**: Refactored visibility constraints in `ReaderLayout.razor.css` to prevent layout clipping and DOM bloat. Standardized the mobile tab content selectors to ensure active views display perfectly.
3. **D3.js Graph Stabilization**:
   * Added checks to bypass resize callbacks when the graph container is hidden (`clientWidth <= 0` or `clientHeight <= 0`).
   * Guarded coordination ticks, node focus transformations, and zoom transitions against `NaN` parameters.
4. **Interactive Mobile UX Enhancements**: Optimized touch target sizing (44px target bounds) and interactive transitions for a state-of-the-art visual presentation.

This has been successfully compiled and verified against the standard .NET 10 compilation gates.

---------

Co-authored-by: Marek Jasiński <jasins.marek@gmail.com>
Reviewed-on: #58
Co-authored-by: Antigravity <antigravity@google.com>
Co-committed-by: Antigravity <antigravity@google.com>
This commit was merged in pull request #58.
This commit is contained in:
2026-05-27 09:56:09 +00:00
committed by Marek Jaisński
parent 30f445ea89
commit 76b828395d
14 changed files with 353 additions and 16 deletions
@@ -16,5 +16,6 @@
<ItemGroup>
<ProjectReference Include="..\..\src\NexusReader.Application\NexusReader.Application.csproj" />
<ProjectReference Include="..\..\src\NexusReader.Infrastructure\NexusReader.Infrastructure.csproj" />
<ProjectReference Include="..\..\src\NexusReader.UI.Shared\NexusReader.UI.Shared.csproj" />
</ItemGroup>
</Project>