Change body background to sidebar color

[dimaMachina]

just try to overscroll

before

dark	light

after

dark	light

[changeset-bot]

⚠️ No Changeset found

Latest commit: 49886ed

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

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

Project	Deployment	Review	Updated (UTC)
agents-manage-api	Ready	Preview, Comment	Dec 29, 2025 7:22am
agents-manage-ui	Ready	Preview, Comment	Dec 29, 2025 7:22am
agents-run-api	Ready	Preview, Comment	Dec 29, 2025 7:22am

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
agents-docs	Skipped		Dec 29, 2025 7:22am

[claude]

Claude finished @dimaMachina's task —— View job

---

Code Review: Change body background to sidebar color

Change Summary: The PR changes the body background from bg-background to bg-sidebar in globals.css:210, creating visual consistency by making the body background match the sidebar color.

Visual Impact: The before/after screenshots clearly demonstrate the improvement - the overscroll area now matches the sidebar color instead of showing a jarring contrast, providing a more polished user experience.

✅ Strengths

1. Visual Consistency: The change elegantly solves the overscroll UX issue by ensuring the body background matches the sidebar color
2. Simple & Focused: Single line change with clear intent and minimal risk
3. Theme Support: Works correctly with both light and dark themes since --sidebar is properly defined for both
4. Design System Adherence: Uses existing design tokens (--sidebar) rather than introducing new values

⚠️ Architecture & Design Considerations

Medium Priority - Layout Architecture Concern:

The change reveals a potential architectural inconsistency. Looking at the layout structure:

// Root layout.tsx applies bg-sidebar to body
body { @apply bg-sidebar text-foreground; }

// SidebarInset component applies bg-background
function SidebarInset() {
  return <main className="bg-background relative flex..." />
}

This creates a layered background pattern where:

• body = bg-sidebar (now matches sidebar color)
• SidebarInset = bg-background (main content area)

Potential Issues:

1. Semantic Confusion: The body background now represents "sidebar color" semantically, which may be confusing for future developers
2. Future Layout Changes: If the layout structure changes (e.g., different sidebar implementations, full-screen modes), this assumption may break
3. Maintenance: Future developers might not understand why body has sidebar colors

Suggested Improvements (not blocking, but worth considering):

1. Add Documentation: Consider adding a CSS comment explaining this design decision:

   body {
     /* Use sidebar color for body to ensure smooth overscroll experience */
     @apply bg-sidebar text-foreground;
   }

2. Consider Alternative Approaches:

   • Using a wrapper div with bg-sidebar around the sidebar+content area
   • CSS body::before pseudo-element for background consistency
   • Layout-specific background handling

🔍 Technical Review

• CSS Variable Usage: ✅ Correctly uses existing --sidebar design token
• Theme Support: ✅ Works with light/dark themes (verified --sidebar definitions exist)
• Specificity: ✅ No specificity conflicts introduced
• Performance: ✅ No performance impact

📋 Process & Standards

Missing Changeset: The PR needs a changeset for the @inkeep/agents-manage-ui package as indicated by changeset-bot.

✅ Recommendation

APPROVE - This is a good UX improvement with minimal risk. The change effectively solves the overscroll visual issue and follows existing design system patterns. While there are architectural considerations worth noting for future development, they don't block this change.

Required Action: Add the missing changeset before merging.