diff --git a/apps/nextjs/src/app/aila/[id]/download/DownloadView.stories.tsx b/apps/nextjs/src/app/aila/[id]/download/DownloadView.stories.tsx
index 6021b1dfe..a3ce6dad9 100644
--- a/apps/nextjs/src/app/aila/[id]/download/DownloadView.stories.tsx
+++ b/apps/nextjs/src/app/aila/[id]/download/DownloadView.stories.tsx
@@ -1,6 +1,7 @@
 import type { AilaPersistedChat } from "@oakai/aila/src/protocol/schema";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { CHROMATIC_ALL_VIEWPORTS_COMPAT } from "../../../../../.storybook/chromatic";
 import { DemoProvider } from "../../../../../src/components/ContextProviders/Demo";
 import { DownloadContent } from "./DownloadView";
 
@@ -9,6 +10,7 @@ const meta: Meta<typeof DownloadContent> = {
   component: DownloadContent,
   parameters: {
     layout: "fullscreen",
+    ...CHROMATIC_ALL_VIEWPORTS_COMPAT,
   },
   decorators: [
     (Story) => (
diff --git a/apps/nextjs/src/app/aila/[id]/share/index.stories.tsx b/apps/nextjs/src/app/aila/[id]/share/index.stories.tsx
index b8a803caf..67ddff9d3 100644
--- a/apps/nextjs/src/app/aila/[id]/share/index.stories.tsx
+++ b/apps/nextjs/src/app/aila/[id]/share/index.stories.tsx
@@ -1,6 +1,7 @@
 import type { LooseLessonPlan } from "@oakai/aila/src/protocol/schema";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { CHROMATIC_ALL_VIEWPORTS_COMPAT } from "../../../../../.storybook/chromatic";
 import ShareChat from "./";
 
 const meta: Meta<typeof ShareChat> = {
@@ -8,6 +9,7 @@ const meta: Meta<typeof ShareChat> = {
   component: ShareChat,
   parameters: {
     layout: "fullscreen",
+    ...CHROMATIC_ALL_VIEWPORTS_COMPAT,
   },
 };
 
diff --git a/apps/nextjs/src/app/aila/help/index.stories.tsx b/apps/nextjs/src/app/aila/help/index.stories.tsx
index df567c777..ccf83cfb6 100644
--- a/apps/nextjs/src/app/aila/help/index.stories.tsx
+++ b/apps/nextjs/src/app/aila/help/index.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { DemoProvider } from "@/components/ContextProviders/Demo";
 
 import { HelpContent } from ".";
+import { CHROMATIC_ALL_VIEWPORTS_COMPAT } from "../../../../.storybook/chromatic";
 
 const meta: Meta<typeof HelpContent> = {
   title: "Pages/Chat/Help",
@@ -10,6 +11,7 @@ const meta: Meta<typeof HelpContent> = {
   parameters: {
     // Including custom decorators changes the layout from fullscreen
     layout: "fullscreen",
+    ...CHROMATIC_ALL_VIEWPORTS_COMPAT,
   },
   decorators: [
     (Story) => (
diff --git a/apps/nextjs/src/app/faqs/index.stories.tsx b/apps/nextjs/src/app/faqs/index.stories.tsx
index 7eef2c06a..3b680d677 100644
--- a/apps/nextjs/src/app/faqs/index.stories.tsx
+++ b/apps/nextjs/src/app/faqs/index.stories.tsx
@@ -1,10 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { FAQPageContent } from ".";
+import { CHROMATIC_ALL_VIEWPORTS_COMPAT } from "../../../.storybook/chromatic";
 
 const meta: Meta<typeof FAQPageContent> = {
   title: "Pages/FAQs",
   component: FAQPageContent,
+  parameters: {
+    ...CHROMATIC_ALL_VIEWPORTS_COMPAT,
+  },
 };
 
 export default meta;
diff --git a/apps/nextjs/src/app/home-page.stories.tsx b/apps/nextjs/src/app/home-page.stories.tsx
index e61e5eab1..a260a9692 100644
--- a/apps/nextjs/src/app/home-page.stories.tsx
+++ b/apps/nextjs/src/app/home-page.stories.tsx
@@ -1,10 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { CHROMATIC_ALL_VIEWPORTS_COMPAT } from "../../.storybook/chromatic";
 import { HomePageContent } from "./home-page";
 
 const meta: Meta<typeof HomePageContent> = {
   title: "Pages/Homepage",
   component: HomePageContent,
+  parameters: {
+    ...CHROMATIC_ALL_VIEWPORTS_COMPAT,
+  },
 };
 
 export default meta;
diff --git a/apps/nextjs/src/app/legal/[slug]/legal.stories.tsx b/apps/nextjs/src/app/legal/[slug]/legal.stories.tsx
index 88a049b92..3399f0c79 100644
--- a/apps/nextjs/src/app/legal/[slug]/legal.stories.tsx
+++ b/apps/nextjs/src/app/legal/[slug]/legal.stories.tsx
@@ -1,10 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { CHROMATIC_ALL_VIEWPORTS_COMPAT } from "../../../../.storybook/chromatic";
 import { LegalContent } from "./legal";
 
 const meta: Meta<typeof LegalContent> = {
   title: "Pages/Legal/Sanity dynamic",
   component: LegalContent,
+  parameters: {
+    ...CHROMATIC_ALL_VIEWPORTS_COMPAT,
+  },
 };
 
 export default meta;
diff --git a/apps/nextjs/src/app/legal/account-locked/account-locked.stories.tsx b/apps/nextjs/src/app/legal/account-locked/account-locked.stories.tsx
index 820cdd4e9..193a50021 100644
--- a/apps/nextjs/src/app/legal/account-locked/account-locked.stories.tsx
+++ b/apps/nextjs/src/app/legal/account-locked/account-locked.stories.tsx
@@ -1,10 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { CHROMATIC_ALL_VIEWPORTS_COMPAT } from "../../../../.storybook/chromatic";
 import { AccountLocked } from "./account-locked";
 
 const meta: Meta<typeof AccountLocked> = {
   title: "Pages/Legal/Account Locked",
   component: AccountLocked,
+  parameters: {
+    ...CHROMATIC_ALL_VIEWPORTS_COMPAT,
+  },
 };
 
 export default meta;
diff --git a/apps/nextjs/src/app/prompts/prompts.stories.tsx b/apps/nextjs/src/app/prompts/prompts.stories.tsx
index df2e3d10e..71107ddd7 100644
--- a/apps/nextjs/src/app/prompts/prompts.stories.tsx
+++ b/apps/nextjs/src/app/prompts/prompts.stories.tsx
@@ -1,10 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { CHROMATIC_ALL_VIEWPORTS_COMPAT } from "../../../.storybook/chromatic";
 import { PromptsContent } from "./prompts";
 
 const meta: Meta<typeof PromptsContent> = {
   title: "Pages/Prompts",
   component: PromptsContent,
+  parameters: {
+    ...CHROMATIC_ALL_VIEWPORTS_COMPAT,
+  },
 };
 
 export default meta;
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-start.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-start.stories.tsx
index d02716551..b8ebeb07f 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-start.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-start.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import { DemoProvider } from "@/components/ContextProviders/Demo";
 
+import { CHROMATIC_ALL_VIEWPORTS_COMPAT } from "../../../../.storybook/chromatic";
 import { DialogProvider } from "../DialogContext";
 import { ChatStart } from "./chat-start";
 
@@ -11,6 +12,7 @@ const meta: Meta<typeof ChatStart> = {
   parameters: {
     // Including custom decorators changes the layout from fullscreen
     layout: "fullscreen",
+    ...CHROMATIC_ALL_VIEWPORTS_COMPAT,
   },
   decorators: [
     (Story) => (
diff --git a/apps/nextjs/src/components/Onboarding/AcceptTermsForm.stories.tsx b/apps/nextjs/src/components/Onboarding/AcceptTermsForm.stories.tsx
index cca0f90ef..2efbd027b 100644
--- a/apps/nextjs/src/components/Onboarding/AcceptTermsForm.stories.tsx
+++ b/apps/nextjs/src/components/Onboarding/AcceptTermsForm.stories.tsx
@@ -1,10 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { CHROMATIC_ALL_VIEWPORTS_COMPAT } from "../../../.storybook/chromatic";
 import { AcceptTermsForm } from "./AcceptTermsForm";
 
 const meta: Meta<typeof AcceptTermsForm> = {
   title: "Pages/Onboarding/AcceptTermsForm",
   component: AcceptTermsForm,
+  parameters: {
+    ...CHROMATIC_ALL_VIEWPORTS_COMPAT,
+  },
 };
 
 export default meta;
diff --git a/apps/nextjs/src/components/Onboarding/LegacyUpgradeNotice.stories.tsx b/apps/nextjs/src/components/Onboarding/LegacyUpgradeNotice.stories.tsx
index d61d4b03f..d706d9115 100644
--- a/apps/nextjs/src/components/Onboarding/LegacyUpgradeNotice.stories.tsx
+++ b/apps/nextjs/src/components/Onboarding/LegacyUpgradeNotice.stories.tsx
@@ -1,10 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { CHROMATIC_ALL_VIEWPORTS_COMPAT } from "../../../.storybook/chromatic";
 import { LegacyUpgradeNotice } from "./LegacyUpgradeNotice";
 
 const meta: Meta<typeof LegacyUpgradeNotice> = {
   title: "Pages/Onboarding/LegacyUpgradeNotice",
   component: LegacyUpgradeNotice,
+  parameters: {
+    ...CHROMATIC_ALL_VIEWPORTS_COMPAT,
+  },
 };
 
 export default meta;