app/plans/06-fix-double-border-desktop.md

# Plan: Fix Double Border on Desktop Between Sidebar and Conversation

**Priority:** LOW - Visual polish
**Dependencies:** None
**Affects:** Desktop UI aesthetics

## Overview

There's a double border appearing on desktop between the sidebar and the main conversation area. This creates a visual inconsistency and needs to be fixed for a polished look.

## Current Issue

```
+----------+||+-------------+
| Sidebar  |||  Main       |
|          |||  Content    |
|          |||             |
+----------+||+-------------+
             ^^
        Double border
```

## Root Cause

Likely causes:
1. Both AppShell.Navbar and AppShell.Main have borders
2. Border-box sizing causing borders to stack
3. Mantine default styles adding extra borders

## Investigation Steps

1. **Inspect current implementation**
   ```typescript
   // Check components/DesktopNav.tsx
   // Check app/layout.tsx AppShell usage
   // Check theme.ts AppShell styles
   ```

2. **Identify which elements have borders**
   - AppShell.Navbar
   - AppShell.Main
   - Any wrapper components

## Proposed Fixes

### Option 1: Remove Border from One Side

```typescript
// app/theme.ts
export const theme = createTheme({
  components: {
    AppShell: {
      styles: {
        navbar: {
          borderRight: 'none', // Remove right border from navbar
        },
      },
    },
  },
});
```

### Option 2: Use Single Shared Border

```typescript
// app/theme.ts
export const theme = createTheme({
  components: {
    AppShell: {
      styles: (theme) => ({
        navbar: {
          borderRight: `1px solid ${theme.colors.gray[3]}`,
        },
        main: {
          borderLeft: 'none', // Remove left border from main
        },
      }),
    },
  },
});
```

### Option 3: Use Divider Component

```typescript
// components/DesktopNav.tsx
<Group h="100%" gap={0} wrap="nowrap">
  <AppShell.Navbar>{/* ... */}</AppShell.Navbar>
  <Divider orientation="vertical" />
  <AppShell.Main>{/* ... */}</AppShell.Main>
</Group>
```

## Testing

### Manual Playwright MCP Test
```typescript
test('No double border between sidebar and main content', async ({ page }) => {
  await page.goto('/chat');
  await page.setViewportSize({ width: 1920, height: 1080 });

  // Take screenshot of border area
  const borderElement = page.locator('.mantine-AppShell-navbar');
  await borderElement.screenshot({ path: 'border-before.png' });

  // Check computed styles
  const navbarBorder = await page.evaluate(() => {
    const navbar = document.querySelector('.mantine-AppShell-navbar');
    return window.getComputedStyle(navbar!).borderRight;
  });

  const mainBorder = await page.evaluate(() => {
    const main = document.querySelector('.mantine-AppShell-main');
    return window.getComputedStyle(main!).borderLeft;
  });

  // Only one should have a border
  const hasDouble = navbarBorder !== 'none' && mainBorder !== 'none';
  expect(hasDouble).toBe(false);
});
```

### Magnitude Test
```typescript
import { test } from 'magnitude-test';

test('Desktop sidebar has clean border', async (agent) => {
  await agent.open('http://localhost:3000/chat');
  await agent.act('Resize window to desktop size (1920x1080)');
  await agent.check('Sidebar is visible');
  await agent.check('No double border between sidebar and content');
  await agent.check('Border is clean and single-width');
});
```

## Implementation Steps

1. **Identify current border setup**
   - Inspect DesktopNav component
   - Check AppShell configuration
   - Check theme.ts

2. **Choose fix approach**
   - Decide which element keeps the border
   - Remove border from other element

3. **Implement fix**
   - Update theme.ts or component styles

4. **Test with Playwright MCP**
   - Visual inspection
   - Computed styles check

5. **Add Magnitude test**

6. **Commit and push**

## Success Criteria

- ✅ Only one border between sidebar and main content
- ✅ Border is clean and single-width
- ✅ Consistent across all pages
- ✅ Works in both light and dark mode
- ✅ Playwright MCP test passes
- ✅ Magnitude test passes

## Files to Update

1. `app/theme.ts` - Update AppShell border styles
2. `tests/playwright/desktop-border.spec.ts` - Manual test
3. `tests/magnitude/desktop-border.mag.ts` - Magnitude test