refactor: update ScrollableOverlay structure for consistent layout across pages

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>
   );
 };