diff --git a/packages/ui/src/components/sections/agents/AgentsPage.tsx b/packages/ui/src/components/sections/agents/AgentsPage.tsx
index 6baa0843..af033e0e 100644
--- a/packages/ui/src/components/sections/agents/AgentsPage.tsx
+++ b/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>
   );
 };
diff --git a/packages/ui/src/components/sections/commands/CommandsPage.tsx b/packages/ui/src/components/sections/commands/CommandsPage.tsx
index 3e73062d..1095042c 100644
--- a/packages/ui/src/components/sections/commands/CommandsPage.tsx
+++ b/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>
   );
 };
diff --git a/packages/ui/src/components/sections/git-identities/GitIdentitiesPage.tsx b/packages/ui/src/components/sections/git-identities/GitIdentitiesPage.tsx
index 1d12c441..9c8e43b9 100644
--- a/packages/ui/src/components/sections/git-identities/GitIdentitiesPage.tsx
+++ b/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>
   );
 };
diff --git a/packages/ui/src/components/sections/providers/ProvidersPage.tsx b/packages/ui/src/components/sections/providers/ProvidersPage.tsx
index 6b4a9d13..6d3333ec 100644
--- a/packages/ui/src/components/sections/providers/ProvidersPage.tsx
+++ b/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>
   );
 };
diff --git a/packages/ui/src/components/sections/shared/SettingsPageLayout.tsx b/packages/ui/src/components/sections/shared/SettingsPageLayout.tsx
index 050e323a..e5a7ae8b 100644
--- a/packages/ui/src/components/sections/shared/SettingsPageLayout.tsx
+++ b/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(
-        'mx-auto max-w-3xl space-y-6 p-3 sm:p-6',
-        className
-      )}
+      className="w-full"
     >
-      {children}
+      <div
+        className={cn(
+          'mx-auto max-w-3xl space-y-6 p-3 sm:p-6',
+          className
+        )}
+      >
+        {children}
+      </div>
     </ScrollableOverlay>
   );
 };
diff --git a/packages/ui/src/components/sections/skills/SkillsPage.tsx b/packages/ui/src/components/sections/skills/SkillsPage.tsx
index 9e71419c..64e438c3 100644
--- a/packages/ui/src/components/sections/skills/SkillsPage.tsx
+++ b/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>
   );
 };
diff --git a/packages/ui/src/components/sections/skills/catalog/SkillsCatalogPage.tsx b/packages/ui/src/components/sections/skills/catalog/SkillsCatalogPage.tsx
index 4554552a..a798ef90 100644
--- a/packages/ui/src/components/sections/skills/catalog/SkillsCatalogPage.tsx
+++ b/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>
   );
 };