0:00
/0:06

Following up on our recent release of the Centered Three-Column Layout, we observed a friction point in the user experience on desktop.

While the structural move to a 1200px max-width container was successful, the scroll behavior introduced a subtle cognitive load. Specifically, we had three independent scrolling contexts active simultaneously. If you moved your mouse slightly to the left or right, you might accidentally scroll the Profile sidebar or the (upcoming) Chat column instead of your Notes feed.

We are pushing a patch today to lock this behavior down. Here is the logic behind the change.

The Logic: Context vs. Content

In a density-heavy application, distinct zones serve different purposes:

  1. Sidebars (Profile & Chat) are Context. They are reference materials. They should feel stable and grounded.
  2. Center (Feed) is Content. This is where the user's attention is focused and where navigation happens.

Allowing "Context" to scroll independently of "Content" created a "wobbly" UI feel. It required the user to perform precision mouse movements to target the correct scrollable area.

The Fix: overflow-hidden

We have updated the CSS architecture for the md (desktop) breakpoint.

Previously, all three columns utilized overflow-y-auto. We have removed this property from the outer columns, effectively "locking" them in place. The Center column remains the sole scrollable element in the viewport.

graph TD subgraph "Previous State (Unstable)" A[Viewport] --> B[Left: Profile] A --> C[Center: Notes] A --> D[Right: Chat] B -- "Scrolls independently" --> B1((↕️)) C -- "Scrolls independently" --> C1((↕️)) D -- "Scrolls independently" --> D1((↕️)) end subgraph "New State (Focused)" X[Viewport] --> Y[Left: Profile] X --> Z[Center: Notes] X --> W[Right: Chat] Y -- "FIXED / CLIPPED" --> Y1((🔒)) Z -- "SCROLLS" --> Z1((↕️)) W -- "FIXED / CLIPPED" --> W1((🔒)) end

Technical Implementation

This change was isolated to src/components/PersonDetail.tsx.

We identified that the md:overflow-hidden rule on the parent container was correct, but the children were too permissive.

  • Profile Sidebar: Switched to overflow-hidden.
  • Chat Column: Switched to overflow-hidden.

This ensures that the browser no longer reserves memory for scrollbars on the edges, and scroll events (wheel or touch) are naturally funneled to the center content area.

Looking Ahead: Handling Overflow

You might ask: "What if the Profile content is taller than the screen?"

Currently, with overflow-hidden, that content effectively clips. We are aware of this edge case. Rather than re-enabling a messy scrollbar, our next update will introduce an Accordion Pattern for profile details. This will allow you to collapse and expand sections (like Bio, Tags, and Metadata) to keep the sidebar within the viewport height, preserving the "locked" dashboard feel without losing data access.