From 63bdc3ae3990472d91c190bd29ee95c5181e4d12 Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Thu, 18 Dec 2025 01:38:02 -0500
Subject: [PATCH] fix(copilot): widen sidebar and balance split-view layout

- Increase sidebar width from w-64 to w-80 (320px)
- Increase model name truncation from 100px to 160px
- Balance config form split-view to 50%/50%
---
 ui/src/components/copilot/copilot-config-form.tsx | 8 ++++----
 ui/src/pages/copilot.tsx                          | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/copilot/copilot-config-form.tsx b/ui/src/components/copilot/copilot-config-form.tsx
index cb9a37e3..1df9a38d 100644
--- a/ui/src/components/copilot/copilot-config-form.tsx
+++ b/ui/src/components/copilot/copilot-config-form.tsx
@@ -3,8 +3,8 @@
  *
  * Form for configuring GitHub Copilot integration settings.
  * Split-view layout matching CLIProxy provider editor:
- * - Left: Friendly UI with model mapping selectors
- * - Right: Raw JSON editor for copilot.settings.json
+ * - Left (50%): Friendly UI with model mapping selectors
+ * - Right (50%): Raw JSON editor for copilot.settings.json
  */
 
 import { useState, useMemo, useCallback, lazy, Suspense } from 'react';
@@ -637,8 +637,8 @@ export function CopilotConfigForm() {
         </div>
       </div>
 
-      {/* Split Layout (40% Left / 60% Right) */}
-      <div className="flex-1 grid grid-cols-[40%_60%] divide-x overflow-hidden">
+      {/* Split Layout (50% Left / 50% Right) */}
+      <div className="flex-1 grid grid-cols-2 divide-x overflow-hidden">
         {/* Left Column: Friendly UI */}
         <div className="flex flex-col overflow-hidden bg-muted/5">{renderFriendlyUI()}</div>
 
diff --git a/ui/src/pages/copilot.tsx b/ui/src/pages/copilot.tsx
index 57c81ad2..fd9eef3c 100644
--- a/ui/src/pages/copilot.tsx
+++ b/ui/src/pages/copilot.tsx
@@ -113,7 +113,7 @@ export function CopilotPage() {
   return (
     <div className="h-[calc(100vh-100px)] flex">
       {/* Left Sidebar - Status Overview */}
-      <div className="w-64 border-r flex flex-col bg-muted/30 shrink-0">
+      <div className="w-80 border-r flex flex-col bg-muted/30 shrink-0">
         {/* Header */}
         <div className="p-4 border-b bg-background">
           <div className="flex items-center justify-between mb-1">
@@ -229,7 +229,7 @@ export function CopilotPage() {
                 <div className="px-3 py-2 rounded-lg bg-muted/50 space-y-1.5">
                   <div className="flex items-center justify-between text-xs">
                     <span className="text-muted-foreground">Model</span>
-                    <span className="font-mono truncate max-w-[100px] text-[10px]">
+                    <span className="font-mono truncate max-w-[160px] text-[10px]">
                       {status?.model ?? 'N/A'}
                     </span>
                   </div>