feat(webui/node): redesign node detailed page

[Jitmisra]

Before

After

Monosnap.screencast.2025-07-31.00-02-07.mp4

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 47.08%. Comparing base (6c56470) to head (c2b0dd4).
⚠️ Report is 77 commits behind head on unstable.

Additional details and impacted files

@@             Coverage Diff              @@
##           unstable     #330      +/-   ##
============================================
+ Coverage     43.38%   47.08%   +3.69%     
============================================
  Files            37       45       +8     
  Lines          2971     4420    +1449     
============================================
+ Hits           1289     2081     +792     
- Misses         1544     2130     +586     
- Partials        138      209      +71     

Flag	Coverage Δ
unittests	47.08% <ø> (+3.69%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull Request Overview

This PR redesigns the node detailed page UI in the web interface, focusing on improving the visual design and mobile responsiveness of both the sidebar and main content area.

• Enhanced the sidebar with mobile responsiveness and smooth width transitions
• Redesigned the node details page with improved layout, better spacing, and modern card-based design
• Added new icons and improved visual hierarchy throughout the interface

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
webui/src/app/ui/sidebar.tsx	Added mobile responsiveness with dynamic width, toggle button, and improved styling
webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/nodes/[node]/page.tsx	Complete redesign of node details page with modern card layout, enhanced styling, and removed custom IconButton component
webui/src/app/layout.tsx	Added suppressHydrationWarning attribute to body element

Comments suppressed due to low confidence (2)

webui/src/app/ui/sidebar.tsx:502

• [nitpick] The CSS class name 'sidebar-scrollbar' suggests custom scrollbar styling but appears to be used only as an identifier. Consider renaming to something more descriptive like 'node-list-container' or using the existing 'custom-scrollbar' class that was replaced.

                        <div className="sidebar-scrollbar max-h-[calc(100vh-200px)] overflow-y-auto rounded-xl bg-gray-50/50 p-2 dark:bg-dark-border/20">

webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/nodes/[node]/page.tsx:125

• [nitpick] The CSS class 'no-scrollbar' is used but may not be defined or consistent with the project's styling approach. Consider using a more descriptive class name or ensuring this utility class is properly defined in the CSS.

            <div className="no-scrollbar flex-1 overflow-y-auto bg-white pb-8 dark:bg-dark">

[Copilot]

The import includes 'Chip' and 'Divider' components that are no longer used in the redesigned component. These unused imports should be removed to keep the code clean.

Suggested change

	import { Box, Typography, Chip, Paper, Divider, Grid, Alert, IconButton } from "@mui/material";
	import { Box, Typography, Paper, Grid, Alert, IconButton } from "@mui/material";