refactor(ui): standardize page layout across all routes

Applied consistent centered layout (max-w-6xl mx-auto) from cliproxy page
to all pages except home page. Updated spacing to space-y-8 for uniformity.

Author: kaitranntt

docs/project-roadmap.md

@@ -584,6 +584,24 @@ src/types/
 - **User Experience**: One-command channel switching without data loss
 - **Backward Compatibility**: Zero breaking changes, existing workflows preserved
 
+### Version 4.5.1 - UI Layout Improvements
+**Release Date**: 2025-12-08
+
+#### UI Fixes & Improvements
+- ✅ **CLIProxy Card Padding**: Removed excessive padding from CLIProxy cards for better visual integration.
+- ✅ **CLIProxy Dashboard Layout**: Improved overall layout and styling of the CLIProxy dashboard for enhanced user experience.
+- ✅ **Dropdown Styling**: Refined dropdown component styling for consistency and readability.
+
+#### Technical Improvements
+- **Improved UI Responsiveness**: Adjustments ensure better display across various screen sizes.
+- **Enhanced User Experience**: Minor visual tweaks lead to a more polished and intuitive interface.
+
+#### Validation Results
+- **UI Rendering**: ✅ All UI components render correctly after layout adjustments.
+- **Functional Impact**: ✅ No regressions introduced, core functionality remains stable.
+
+---
+
 #### Testing Infrastructure
 - **Version Comparison Tests**: 25 unit tests for all semantic version scenarios
 - **Flag Parsing Tests**: 4 integration tests for update command flags
@@ -794,6 +812,6 @@ src/types/
 ---
 
 **Document Status**: Living document, updated with each major release
-**Last Updated**: 2025-12-07 (React Dashboard Integration Complete)
+**Last Updated**: 2025-12-08 (UI Layout Improvements)
 **Next Update**: v4.6.0 UI Enhancements Planning
 **Maintainer**: CCS Development Team

ui/src/pages/accounts.tsx

@@ -10,7 +10,7 @@ export function AccountsPage() {
   const { data, isLoading } = useAccounts();
 
   return (
-    <div className="p-6 space-y-4">
+    <div className="p-6 max-w-6xl mx-auto space-y-8">
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">Accounts</h1>

ui/src/pages/api.tsx

@@ -35,7 +35,7 @@ export function ApiPage() {
   };
 
   return (
-    <div className="p-6 space-y-4">
+    <div className="p-6 max-w-6xl mx-auto space-y-8">
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">API Profiles</h1>

ui/src/pages/cliproxy.tsx

@@ -47,7 +47,7 @@ function AccountBadge({
           }`}
         >
           <User className="w-3 h-3" />
-          <span className="max-w-[120px] truncate">{account.email || account.id}</span>
+          <span className="max-w-[200px] truncate">{account.email || account.id}</span>
           {account.isDefault && <Star className="w-3 h-3 fill-current" />}
           <ChevronDown className="w-3 h-3 opacity-50" />
         </button>

ui/src/pages/health.tsx

@@ -11,7 +11,7 @@ export function HealthPage() {
   };
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 max-w-6xl mx-auto space-y-8">
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">Health Dashboard</h1>

ui/src/pages/settings.tsx

@@ -10,7 +10,7 @@ import { Construction, ArrowRight } from 'lucide-react';
 
 export function SettingsPage() {
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 max-w-6xl mx-auto space-y-8">
       <h1 className="text-2xl font-bold">Settings</h1>
 
       <Card className="border-yellow-500/50 bg-yellow-500/5">

ui/src/pages/shared.tsx

@@ -19,7 +19,7 @@ export function SharedPage() {
   ];
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 max-w-6xl mx-auto space-y-8">
       <div>
         <h1 className="text-2xl font-bold">Shared Data</h1>
         <p className="text-muted-foreground">