refactor(ui): unify layout system with 60rem max-width and consistent spacing

- Standardize container max-width across all panels:
  * Replace max-w-4xl and max-w-5xl with unified max-w-[60rem]
  * Apply to SettingsPage, UnifiedMcpPanel, SkillsPage, and FullScreenPanel
  * Ensures consistent reading width and visual balance on wide screens

- Optimize padding hierarchy and structure:
  * Move px-6 from parent elements to content containers
  * FullScreenPanel: Add max-w-[60rem] wrapper to header, content, and footer
  * Add border separators (border-t/border-b) to header and footer sections
  * Consolidate nested padding in MCP, Skills, and Prompts panels
  * Remove redundant padding layers for cleaner CSS

- Simplify component styling:
  * MCP list items: Replace card-based layout with modern group-based design
  * Remove unnecessary wrapper divs and flatten DOM structure
  * Update card hover effects with smooth transitions
  * Simplify icon selection dialog (remove description text in BasicFormFields)

- Benefits:
  * Consistent 60rem max-width provides optimal readability
  * Unified spacing rules reduce maintenance complexity
  * Cleaner component hierarchy improves performance
  * Better responsive behavior across different screen sizes
  * More cohesive visual design language throughout the app

This creates a maintainable, scalable design system foundation.

src/components/common/FullScreenPanel.tsx

@@ -32,33 +32,39 @@ export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
     >
       {/* Header */}
       <div
-        className="flex-shrink-0 px-6 py-4 flex items-center gap-4"
+        className="flex-shrink-0 py-4 border-b border-border-default"
         style={{ backgroundColor: "hsl(var(--background))" }}
       >
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          onClick={onClose}
-          className="hover:bg-black/5 dark:hover:bg-white/5"
-        >
-          <ArrowLeft className="h-5 w-5" />
-        </Button>
-        <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+        <div className="mx-auto max-w-[60rem] px-6 flex items-center gap-4">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={onClose}
+            className="hover:bg-black/5 dark:hover:bg-white/5"
+          >
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+          <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+        </div>
       </div>
 
       {/* Content */}
-      <div className="flex-1 overflow-y-auto px-6 py-6 space-y-6 max-w-5xl mx-auto w-full">
-        {children}
+      <div className="flex-1 overflow-y-auto">
+        <div className="mx-auto max-w-[60rem] px-6 py-6 space-y-6 w-full">
+          {children}
+        </div>
       </div>
 
       {/* Footer */}
       {footer && (
         <div
-          className="flex-shrink-0 px-6 py-4 flex items-center justify-end gap-3"
+          className="flex-shrink-0 py-4 border-t border-border-default"
           style={{ backgroundColor: "hsl(var(--background))" }}
         >
-          {footer}
+          <div className="mx-auto max-w-[60rem] px-6 flex items-center justify-end gap-3">
+            {footer}
+          </div>
         </div>
       )}
     </div>,