fix(web): improve scroll areas, layout, and chart formatting

[ZingerLittleBee]

Summary

• Replace native overflow-auto / overflow-y-auto with shadcn <ScrollArea> across Table, network probes settings, and authed layout for consistent custom scrollbar behavior
• Fix server cards widget bottom whitespace by removing h-full and adding content-start
• Enhance LatencyChart for extended time ranges (≥168h): date-based tick formatting (MM-DD), 24h time in tooltips, and transparent area fill to reduce visual noise
• Make DataTable header sticky with sticky top-0 z-10 bg-background
• Fix network probes settings tab to properly fill available space and scroll independently

Test plan

• Verify dashboard server cards have no extra bottom whitespace
• Verify network probes settings page: targets tab scrolls within its area, settings tab scrolls independently
• Verify LatencyChart displays correctly for 1h, 24h, and 7d+ time ranges
• Verify tables across the app have sticky headers when scrolling
• Verify custom scrollbars appear consistently (no native scrollbar flicker)

Summary by CodeRabbit

• New Features

  • Extended latency chart support for longer time periods (up to 4 weeks) with improved date and time formatting

• Improvements

  • Added sticky table headers for better visibility while scrolling
  • Enhanced scrolling behavior and layout consistency across dashboards
  • Refined spacing and visual presentation in server cards and network probes page
  • Improved chart styling for latency and packet-loss visualization

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
server-bee-docs	Ready	Preview, Comment	Apr 12, 2026 3:05pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR standardizes scrolling behavior across the application by introducing the ScrollArea component convention and adds time-range support to the latency chart. It includes layout improvements for the network probes settings page, makes table headers sticky, and refines grid/flex alignment across multiple card and dashboard components.

Changes

Cohort / File(s)	Summary
ScrollArea & Scroll Standardization AGENTS.md, apps/web/src/components/ui/scroll-area.tsx, apps/web/src/components/ui/table.tsx	Introduces UI convention requiring ScrollArea component for scrollable containers; adds overflow-hidden class to ScrollArea root; replaces native overflow-x-auto div wrapper in Table with ScrollArea component.
LatencyChart Time Range Support apps/web/src/components/network/latency-chart.tsx, apps/web/src/routes/_authed/network/$serverId.tsx	Adds optional hours prop to LatencyChart, enabling conditional date/time formatting for extended time ranges (≥168 hours); changes area fill opacity and tooltip/tick formatting based on range; updates call site to pass derived hours value.
Layout & Grid Refinements apps/web/src/components/dashboard/widgets/server-cards.tsx, apps/web/src/components/server/server-card.tsx, apps/web/src/routes/_authed.tsx, apps/web/src/components/ui/data-table.tsx	Adds content-start alignment to server cards grid; makes table headers sticky with z-index and background; reorganizes server card latency chart structure and colors; updates main layout to flex column with full height.
Network Probes Page Restructuring apps/web/src/routes/_authed/settings/network-probes.tsx	Refactors page layout to flex column with overflow containment; restructures tabs with header row for conditional "Add target" button; replaces card wrapper and native scrolling with ScrollArea components in settings form and checkbox lists; reorganizes loading and empty states.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Poem

Hop along the scrolling way, 🐰
ScrollArea guides us every day,
Tables sticky, latency charts align,
Layouts flex and flow divine,
From probes to cards, all neat and fine! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title accurately summarizes the main changes: improving scroll areas (replacing native overflow with ScrollArea), layout adjustments (grid content alignment, tab layout fixes), and chart formatting (date-based ticks, transparent fills, sticky headers).
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch vienna

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}