Fix ServerSettingsModal stories rendering as blank screen

Wrap modal stories in AppShell to provide a page background behind
the modal overlay. Add fullscreen layout parameter.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-04-21 17:50:30 -04:00
commit e54c186603

View file

@ -1,5 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import type { InspectorServerSettings } from "@inspector/core/mcp/types.js"; import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
import { AppShell } from "@mantine/core";
import type { Meta, StoryObj } from "@storybook/react-vite"; import type { Meta, StoryObj } from "@storybook/react-vite";
import { ServerSettingsModal } from "./ServerSettingsModal"; import { ServerSettingsModal } from "./ServerSettingsModal";
@ -26,18 +27,23 @@ function InteractiveModal({
useState<InspectorServerSettings>(startSettings); useState<InspectorServerSettings>(startSettings);
return ( return (
<ServerSettingsModal <AppShell>
opened <AppShell.Main>
settings={settings} <ServerSettingsModal
onClose={() => {}} opened
onSettingsChange={setSettings} settings={settings}
/> onClose={() => {}}
onSettingsChange={setSettings}
/>
</AppShell.Main>
</AppShell>
); );
} }
const meta: Meta<typeof ServerSettingsModal> = { const meta: Meta<typeof ServerSettingsModal> = {
title: "Groups/ServerSettingsModal", title: "Groups/ServerSettingsModal",
component: ServerSettingsModal, component: ServerSettingsModal,
parameters: { layout: "fullscreen" },
}; };
export default meta; export default meta;