refactor: update ScrollableOverlay structure for consistent layout across pages

packages/ui/src/components/sections/agents/AgentsPage.tsx

@@ -266,8 +266,9 @@ export const AgentsPage: React.FC = () => {
   }
 
   return (
-    <ScrollableOverlay outerClassName="h-full" className="mx-auto max-w-3xl space-y-6 p-6">
+    <ScrollableOverlay outerClassName="h-full" className="w-full">
-      {}
+      <div className="mx-auto max-w-3xl space-y-6 p-6">
+      {/* Header */}
       <div className="space-y-1">
         <h1 className="typography-ui-header font-semibold text-lg">
           {isNewAgent ? 'New Agent' : selectedAgentName}
@@ -929,6 +930,7 @@ export const AgentsPage: React.FC = () => {
           </Button>
         </div>
       </div>
+      </div>
     </ScrollableOverlay>
   );
 };

packages/ui/src/components/sections/commands/CommandsPage.tsx

@@ -122,8 +122,9 @@ export const CommandsPage: React.FC = () => {
   }
 
   return (
-    <ScrollableOverlay outerClassName="h-full" className="mx-auto max-w-3xl space-y-6 p-6">
+    <ScrollableOverlay outerClassName="h-full" className="w-full">
-        {}
+        <div className="mx-auto max-w-3xl space-y-6 p-6">
+        {/* Header */}
         <div className="space-y-1">
           <h1 className="typography-ui-header font-semibold text-lg">
             {isNewCommand ? 'New Command' : `/${selectedCommandName}`}
@@ -359,6 +360,7 @@ Use @filename to include file contents.`}
           </Button>
         </div>
       </div>
+      </div>
     </ScrollableOverlay>
   );
 };

packages/ui/src/components/sections/git-identities/GitIdentitiesPage.tsx

@@ -156,8 +156,9 @@ export const GitIdentitiesPage: React.FC = () => {
   }
 
   return (
-    <ScrollableOverlay outerClassName="h-full" className="mx-auto max-w-3xl space-y-6 p-6">
+    <ScrollableOverlay outerClassName="h-full" className="w-full">
-        {}
+        <div className="mx-auto max-w-3xl space-y-6 p-6">
+        {/* Header */}
         <div className="space-y-1">
           <h1 className="typography-ui-header font-semibold text-lg">
             {isNewProfile ? 'New Git Profile' : isGlobalProfile ? 'Global Identity' : name || 'Edit Profile'}
@@ -369,6 +370,7 @@ export const GitIdentitiesPage: React.FC = () => {
         </div>
         )}
       </div>
+      </div>
     </ScrollableOverlay>
   );
 };

packages/ui/src/components/sections/providers/ProvidersPage.tsx

@@ -449,7 +449,8 @@ export const ProvidersPage: React.FC = () => {
 
   if (isAddMode) {
     return (
-      <ScrollableOverlay outerClassName="h-full" className="mx-auto max-w-3xl space-y-6 p-6">
+      <ScrollableOverlay outerClassName="h-full" className="w-full">
+        <div className="mx-auto max-w-3xl space-y-6 p-6">
         <div className="space-y-1">
           <h1 className="typography-ui-header font-semibold text-lg">Connect provider</h1>
           <p className="typography-body text-muted-foreground">
@@ -700,6 +701,7 @@ export const ProvidersPage: React.FC = () => {
             )}
           </div>
         )}
+        </div>
       </ScrollableOverlay>
     );
   }
@@ -730,7 +732,8 @@ export const ProvidersPage: React.FC = () => {
   });
 
   return (
-    <ScrollableOverlay outerClassName="h-full" className="mx-auto max-w-3xl space-y-6 p-6">
+    <ScrollableOverlay outerClassName="h-full" className="w-full">
+      <div className="mx-auto max-w-3xl space-y-6 p-6">
       <div className="space-y-1">
         <div className="flex items-center gap-2">
           <ProviderLogo providerId={selectedProvider.id} className="h-5 w-5" />
@@ -968,6 +971,7 @@ export const ProvidersPage: React.FC = () => {
           )}
         </div>
       </div>
+      </div>
     </ScrollableOverlay>
   );
 };

packages/ui/src/components/sections/shared/SettingsPageLayout.tsx

@@ -33,12 +33,16 @@ export const SettingsPageLayout: React.FC<SettingsPageLayoutProps> = ({
   return (
     <ScrollableOverlay
       outerClassName={cn('h-full', outerClassName)}
-      className={cn(
+      className="w-full"
-        'mx-auto max-w-3xl space-y-6 p-3 sm:p-6',
-        className
-      )}
     >
-      {children}
+      <div
+        className={cn(
+          'mx-auto max-w-3xl space-y-6 p-3 sm:p-6',
+          className
+        )}
+      >
+        {children}
+      </div>
     </ScrollableOverlay>
   );
 };

packages/ui/src/components/sections/skills/SkillsPage.tsx

@@ -363,7 +363,8 @@ export const SkillsPage: React.FC = () => {
   }
 
   return (
-    <ScrollableOverlay outerClassName="h-full" className="mx-auto max-w-3xl space-y-6 p-6">
+    <ScrollableOverlay outerClassName="h-full" className="w-full">
+      <div className="mx-auto max-w-3xl space-y-6 p-6">
       {isNewSkill ? modeTabs : null}
 
       {/* Header */}
@@ -617,6 +618,7 @@ export const SkillsPage: React.FC = () => {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+      </div>
     </ScrollableOverlay>
   );
 };

packages/ui/src/components/sections/skills/catalog/SkillsCatalogPage.tsx

@@ -121,7 +121,8 @@ export const SkillsCatalogPage: React.FC<SkillsCatalogPageProps> = ({ mode, onMo
   };
 
   return (
-    <ScrollableOverlay outerClassName="h-full" className="mx-auto max-w-3xl space-y-6 p-6">
+    <ScrollableOverlay outerClassName="h-full" className="w-full">
+      <div className="mx-auto max-w-3xl space-y-6 p-6">
       <div className="space-y-3">
         <AnimatedTabs
           tabs={[
@@ -280,6 +281,7 @@ export const SkillsCatalogPage: React.FC<SkillsCatalogPageProps> = ({ mode, onMo
 
       <AddCatalogDialog open={addCatalogOpen} onOpenChange={setAddCatalogOpen} />
       <InstallSkillDialog open={installDialogOpen} onOpenChange={setInstallDialogOpen} item={installItem} />
+      </div>
     </ScrollableOverlay>
   );
 };