refactor(storybook): Centralize story decorators

Author: Chris Hasson

apps/storybook/src/decorators/withLimitedWidth.tsx

@@ -0,0 +1,11 @@
+import type { Decorator } from "@storybook/react"
+
+// Function that creates a decorator with a limited width container
+// Provides consistent centering and configurable max-width constraint
+export const withLimitedWidth = (maxWidth: number = 600): Decorator => {
+	return (Story) => (
+		<div style={{ maxWidth: `${maxWidth}px`, margin: "0 auto" }}>
+			<Story />
+		</div>
+	)
+}

apps/storybook/stories/AutoApproveMenu.stories.tsx

@@ -1,19 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import AutoApproveMenu from "../../../webview-ui/src/components/chat/AutoApproveMenu"
+import { withLimitedWidth } from "../src/decorators/withLimitedWidth"
 
 const meta: Meta<typeof AutoApproveMenu> = {
 	title: "Chat/AutoApproveMenu",
 	component: AutoApproveMenu,
-	parameters: {
-		layout: "padded",
-	},
-	decorators: [
-		(Story) => (
-			<div style={{ maxWidth: "400px", margin: "0 auto" }}>
-				<Story />
-			</div>
-		),
-	],
+	decorators: [withLimitedWidth(400)],
 }
 
 export default meta

apps/storybook/stories/AutoApproveSettings.stories.tsx

@@ -1,16 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { AutoApproveSettings } from "../../../webview-ui/src/components/settings/AutoApproveSettings"
+import { withLimitedWidth } from "../src/decorators/withLimitedWidth"
 
 const meta: Meta<typeof AutoApproveSettings> = {
 	title: "Settings/AutoApproveSettings",
 	component: AutoApproveSettings,
-	decorators: [
-		(Story) => (
-			<div style={{ maxWidth: "600px", margin: "0 auto" }}>
-				<Story />
-			</div>
-		),
-	],
+	decorators: [withLimitedWidth(600)],
 }
 
 export default meta