If you use our app on a widescreen monitor, you’ve probably noticed a phenomenon common in many early-stage web apps: the "Left-Align Fatigue."

Until now, our interface has been strictly left-aligned. On a standard laptop, this works fine. But on a 27-inch monitor (or anything wider than 1400px), the content hugs the left edge of the viewport, leaving a massive, empty void on the right. Your eyes have to travel back and forth across a widening gap, and the balance of the application feels... off.

Today, we are rolling out a major architectural update to the App Shell. We are moving from a fluid, full-width layout to a constrained, centered three-column architecture.

Here is the technical breakdown of why we did this and how it works.

The Problem: Infinite Stretch

Previously, our architecture was built on a min-h-full container that allowed children to stretch to the viewport width. While flexible, this introduced readability issues. Text lines in the "Notes" feed could become uncomfortably long on wide screens, breaking the ideal measure (line length) for reading.

Furthermore, the layout was strictly 2-column:

1. Sidebar: 24rem (fixed)
2. Feed: Fluid (flex-1)

This left us with no dedicated real estate for auxiliary context or future features without cluttering the main feed.

The Solution: The "1200px" Standard

We are adopting the "Golden Standard" of modern social web apps (similar to the X/Twitter dark-mode pattern). We have introduced a parent constraint in the main App Shell that caps the interface at a maximum width of 1200px and centers it horizontally in the viewport.

The New Architecture

Instead of one fluid container, the viewport is now divided into three distinct scrolling contexts within that 1200px shell:

1. The Anchor (Left Column)

• Tech Spec: Fixed width (250px), flex-shrink-0.
• Purpose: This holds the Person Profile. It acts as your navigation anchor. By reducing it from the previous 384px to 250px, we’ve tightened the information density without losing utility.

2. The Stage (Center Column)

• Tech Spec: Fixed width (600px), flex-shrink-0.
• Purpose: This is your Notes Feed. By locking this to 600px, we ensure that no matter how wide your monitor is, the content remains perfectly readable. It prevents your eyes from having to scan long horizontal lines.

3. The Future (Right Column)

• Tech Spec: flex-1 (Fill remaining space).
• Purpose: Currently, this space balances the layout. But architecturally, this div is reserved for our next major feature: Contextual Chat.

Independent Scrolling Contexts

One of the biggest technical improvements in this refactor is how we handle overflow.

Previously, the entire page scrolled together. Now, we use independent scrolling contexts. The layout is calculated as 100dvh (dynamic viewport height).

• The Header is fixed outside the scroll area.
• The Profile (Left) and Future/Chat (Right) columns can be independently scrollable or sticky.
• The Feed (Center) scrolls independently.

This means you can scroll through a long history of notes without losing sight of the profile details on the left or the chat context on the right.

Mobile Responsiveness

For users on devices narrower than 768px, don't worry. The new architecture uses standard media query breakpoints (md:) to collapse gracefully.

• The Right Column vanishes (display: none).
• The Left Column tucks away (accessible via modal).
• The Center Feed expands to take up 100% of the mobile viewport.