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

   // 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

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

Option 2: Use Single Shared Border

// 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

// 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

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

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