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/prompts/PromptFormPanel.tsx

@@ -91,47 +91,11 @@ const PromptFormPanel: React.FC<PromptFormPanelProps> = ({
     : t("prompts.addTitle", { appName });
 
   return (
-    <FullScreenPanel isOpen={true} title={title} onClose={onClose}>
-      <div>
-        <Label htmlFor="name" className="text-foreground">
-          {t("prompts.name")}
-        </Label>
-        <Input
-          id="name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder={t("prompts.namePlaceholder")}
-          className="mt-2"
-        />
-      </div>
-
-      <div>
-        <Label htmlFor="description" className="text-foreground">
-          {t("prompts.description")}
-        </Label>
-        <Input
-          id="description"
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          placeholder={t("prompts.descriptionPlaceholder")}
-          className="mt-2"
-        />
-      </div>
-
-      <div>
-        <Label htmlFor="content" className="block mb-2 text-foreground">
-          {t("prompts.content")}
-        </Label>
-        <MarkdownEditor
-          value={content}
-          onChange={setContent}
-          placeholder={t("prompts.contentPlaceholder", { filename })}
-          darkMode={isDarkMode}
-          minHeight="500px"
-        />
-      </div>
-
-      <div className="flex justify-end pt-6">
+    <FullScreenPanel
+      isOpen={true}
+      title={title}
+      onClose={onClose}
+      footer={
         <Button
           type="button"
           onClick={handleSave}
@@ -140,6 +104,47 @@ const PromptFormPanel: React.FC<PromptFormPanelProps> = ({
         >
           {saving ? t("common.saving") : t("common.save")}
         </Button>
+      }
+    >
+      <div className="glass rounded-xl p-6 border border-white/10 space-y-6">
+        <div>
+          <Label htmlFor="name" className="text-foreground">
+            {t("prompts.name")}
+          </Label>
+          <Input
+            id="name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder={t("prompts.namePlaceholder")}
+            className="mt-2"
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="description" className="text-foreground">
+            {t("prompts.description")}
+          </Label>
+          <Input
+            id="description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder={t("prompts.descriptionPlaceholder")}
+            className="mt-2"
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="content" className="block mb-2 text-foreground">
+            {t("prompts.content")}
+          </Label>
+          <MarkdownEditor
+            value={content}
+            onChange={setContent}
+            placeholder={t("prompts.contentPlaceholder", { filename })}
+            darkMode={isDarkMode}
+            minHeight="500px"
+          />
+        </div>
       </div>
     </FullScreenPanel>
   );