note-251112-scrolling-fix

Fix: Add Vertical Scrolling to All Main Window Tabs

Date: 2025-11-12
Status: ✅ Complete
Type: UI/UX Bug Fix

Issue

Content in tabs (especially P2P Network and RxDB Spike Test) was overflowing vertically without scrolling, making it impossible to access content below the viewport.

Root Cause

The main content area in App.tsx had overflow-hidden which prevented scrolling:

<main className="flex-1 overflow-hidden p-6">
    {renderView()}
</main>

Additionally, the P2PStatus component was setting its own full-height background (min-h-screen) which conflicted with the parent container's layout.

Solution

1. Enable Scrolling on Main Content Area

Changed overflow-hidden to overflow-y-auto in App.tsx:

<main className="flex-1 overflow-y-auto p-6">
    {renderView()}
</main>

This allows the main content area to scroll when content overflows.

2. Remove Conflicting Styles from P2PStatus

Removed min-h-screen and padding from the P2PStatus component:

Before:

<div className="p-4 space-y-4 bg-gray-50 min-h-screen font-mono text-sm">

After:

<div className="space-y-4 font-mono text-sm">

The parent <main> already provides padding, so the component doesn't need its own.

3. Fix Placeholder View Heights

Changed placeholder views (Library, Sessions, Settings) from h-full to min-h-[400px]:

Before:

<div className="flex items-center justify-center h-full">

After:

<div className="flex items-center justify-center min-h-[400px]">

This ensures centered content works properly with parent scrolling.

4. Simplify Playlists Grid Layout

Removed nested overflow-y-auto and h-full from the playlists grid, allowing parent scrolling to handle it:

Before:

<div className="grid grid-cols-5 gap-6 h-full">
    <div className="col-span-2 overflow-y-auto">

After:

<div className="grid grid-cols-5 gap-6">
    <div className="col-span-2">

Files Modified

  • app/src/renderer/App.tsx - Main scrolling container + placeholder view heights
  • app/src/renderer/components/P2P/P2PStatus.tsx - Removed conflicting height/padding

Testing

After this fix, all tabs should:

  • Scroll vertically when content overflows
  • Show all content (no hidden sections)
  • Maintain proper spacing and padding
  • Work with any amount of content

Test Scenarios

  1. P2P Network tab: Long peer lists, expanded sections, debug logs should all be accessible
  2. RxDB Spike Test: All CRUD operations and logs visible
  3. Playlists: Long playlist lists and track lists scroll independently (if needed in future)
  4. Empty tabs: Placeholder content still centered

Design Pattern

Scrolling Strategy:

  • Main content area (<main>) is the scroll container
  • Individual components don't set their own heights
  • Parent padding/spacing is inherited
  • Use min-h-* for minimum heights, never h-full for fixed heights in scrollable containers

Why This Matters

The P2P development interface has many collapsible sections that can create very tall content. Without scrolling, much of the debug information would be inaccessible, defeating the purpose of the comprehensive developer UI.

  • note-251112-p2p-development-interface-complete.md - The comprehensive UI that needed scrolling