fix(desktop): Session tab loses left padding when session changes panel is expanded side-by-side

[shuv1337]

Problem/Context

In the desktop app, when the session changes panel is expanded in side-by-side (pane) mode, the session tab loses its left padding between the session content and the sidebar/message rail. The padding is correctly restored when the session changes are viewed in their own dedicated tab.

This creates a visual inconsistency where the session content appears flush against the left edge when in split-pane view, but has proper spacing in tab view.

Root Cause

The issue is in packages/desktop/src/pages/session.tsx around lines 653-659 where the SessionTurn component's container classes are conditionally applied:

classes={{
  root: "pb-20 flex-1 min-w-0 overflow-x-hidden",
  content: "pb-20",
  container: "w-full max-w-full " + 
    (wide() 
      ? "max-w-146 mx-auto px-4 sm:px-6"  // ← Full padding when wide
      : "pr-4 sm:pr-6"                     // ← RIGHT padding only when not wide (BUG)
    ),
}}

The wide() memo returns true when:

• Review state is "tab" (session changes in its own tab), OR
• There are no diffs to display

When wide() is false (session changes panel expanded side-by-side), only right padding (pr-4 sm:pr-6) is applied, and the left padding is removed entirely.

Acceptance Criteria

• Session tab maintains consistent left padding regardless of whether session changes panel is in pane or tab mode
• Left padding should be preserved between the session content and the sidebar/message rail
• Visual spacing should be consistent in both layout modes
• No regression in responsive behavior on mobile screens

Suggested Fix

Update the conditional class in session.tsx to include left padding in the non-wide case:

container: "w-full max-w-full " + 
  (wide() 
    ? "max-w-146 mx-auto px-4 sm:px-6"
    : "pl-4 sm:pl-6 pr-4 sm:pr-6"           // ← Add left padding
  ),

Or equivalently:

container: "w-full max-w-full " + 
  (wide() 
    ? "max-w-146 mx-auto px-4 sm:px-6"
    : "px-4 sm:px-6"                         // ← Use horizontal padding
  ),

Note: The current approach likely removed left padding to prevent a double-padding effect with the message rail. Verify that the message rail's own padding (pl-0.5) doesn't create excessive spacing when combined with the session content's left padding.

Relevant Files

• packages/desktop/src/pages/session.tsx:653-659 - SessionTurn container classes
• packages/desktop/src/context/layout.tsx:183-191 - Review layout state management
• packages/ui/src/components/session-turn.tsx - SessionTurn component
• packages/ui/src/components/session-message-rail.css:6-12 - Message rail padding

Tasks

• Update the conditional padding classes in session.tsx
• Test with session changes panel in pane (side-by-side) mode
• Test with session changes panel in tab mode
• Test with sidebar expanded and collapsed
• Test responsive behavior on narrow screens

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

_{You can configure auto-planning by selecting labels in the issue_enrichment configuration.}

🔗 Similar Issues

Related Issues

• Fix 'New Session' button text wrapping in narrow windows #111
• Fix mobile Timeline/MessageRail becoming unusable on small screens #129
• Add command palette toggle to hide the session header (title/token/share bar) on small screens #107
• Restore fork features lost in upstream merge: shuvcode branding and subagent sidebar #96
• Add Tab key and mouse click support for autocomplete selection in prompt input #131

🔗 Related PRs

#97 - Sidebar fix [merged]

👤 Suggested Assignees

• kcrommett

---

🧪 Issue enrichment is currently in open beta.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!