diff --git a/src/client/AppNext.tsx b/src/client/AppNext.tsx
index 30b0fabc..aecf2085 100644
--- a/src/client/AppNext.tsx
+++ b/src/client/AppNext.tsx
@@ -72,7 +72,7 @@ const routesNested: RouteObject[] = [
         Component: Layout,
         children: [ {
             index: true,
-            element: <Container boxSize="full" p="0" maxWidth="4xl"><MSErrorBoundary><MSComponentListFetchable/></MSErrorBoundary></Container>,
+            element: <MSErrorBoundary><MSComponentListFetchable/></MSErrorBoundary>,
         },
         {
             path: "components/:componentId",
diff --git a/src/client/components/msComponent/MSComponentList.tsx b/src/client/components/msComponent/MSComponentList.tsx
index 26011412..78f63897 100644
--- a/src/client/components/msComponent/MSComponentList.tsx
+++ b/src/client/components/msComponent/MSComponentList.tsx
@@ -1,5 +1,5 @@
 import { useState, type ComponentProps, useMemo } from "react"
-import { Stack, SegmentGroup, Card, SkeletonText, Box, Flex, Field } from '@chakra-ui/react';
+import { Stack, SegmentGroup, Card, SkeletonText, Box, Flex, Field, Container } from '@chakra-ui/react';
 import type {ComponentsApiJson} from "../../../core/Api";
 import { MSComponentSummary, MSComponentSummaryFetchable } from "./MSComponentSummary";
 import { useQuery } from '@tanstack/react-query';
@@ -26,47 +26,49 @@ export const MSComponentList = (props: ComponentListProps) => {
     const [shownType, setShownType] = useState("All");
     const gc = useMemo(() => gridColumns(value),[value]);
     return (
-        <Stack gap="3">
-            <Flex justify="space-between" alignItems="end" mdDown={{alignItems: 'center', justifyContent: 'center'}}>
-                <SegmentGroup.Root value={shownType} onValueChange={(val) => setShownType(val.value)}>
-                    <SegmentGroup.Indicator />
-                    <SegmentGroup.Items items={["All", "Sources", "Clients"]} />
-                </SegmentGroup.Root>
-            <Box hideBelow="md">
-                <Field.Root>
-                    <Field.Label><TextMuted>Grid Max Width</TextMuted></Field.Label>
-                    <SegmentGroup.Root value={value.toString()} onValueChange={(val) => setValue(Number.parseInt(val.value))}>
-                            <SegmentGroup.Indicator />
-                                <SegmentGroup.Item key="list" value="1">
-                                <SegmentGroup.ItemText>1</SegmentGroup.ItemText>
-                                <SegmentGroup.ItemHiddenInput />
-                            </SegmentGroup.Item>
-                            <SegmentGroup.Indicator />
-                                <SegmentGroup.Item key="2" value="2">
-                                <SegmentGroup.ItemText>2</SegmentGroup.ItemText>
-                                <SegmentGroup.ItemHiddenInput />
-                            </SegmentGroup.Item>
-                            <SegmentGroup.Indicator />
-                                <SegmentGroup.Item key="3" value="3">
-                                <SegmentGroup.ItemText>3</SegmentGroup.ItemText>
-                                <SegmentGroup.ItemHiddenInput />
-                            </SegmentGroup.Item>
-                        </SegmentGroup.Root>
-                </Field.Root>
-            </Box>
-            </Flex>
-            <Box gridColumnGap="2" gridRowGap="2" display="grid" gridTemplateColumns={gc}>
-                {props.components.filter(x => {
-                    if (shownType === 'All') {
-                        return true;
-                    }
-                    if (shownType === 'Sources') {
-                        return x.mode === 'source';
-                    }
-                    return x.mode === 'client';
-                }).map(x => props.fetchable ? <MSErrorBoundary><MSComponentSummaryFetchable key={x.id} componentId={x.id} data={x}/></MSErrorBoundary> : <MSComponentSummary data={x} key={x.uid} />)}
-            </Box>
-        </Stack>
+        <Container boxSize="full" p="0" maxWidth={value === 1 ? '4xl' : '8xl'}>
+            <Stack gap="3">
+                <Flex justify="space-between" alignItems="end" mdDown={{alignItems: 'center', justifyContent: 'center'}}>
+                    <SegmentGroup.Root value={shownType} onValueChange={(val) => setShownType(val.value)}>
+                        <SegmentGroup.Indicator />
+                        <SegmentGroup.Items items={["All", "Sources", "Clients"]} />
+                    </SegmentGroup.Root>
+                <Box hideBelow="md">
+                    <Field.Root>
+                        <Field.Label><TextMuted>Grid Max Width</TextMuted></Field.Label>
+                        <SegmentGroup.Root value={value.toString()} onValueChange={(val) => setValue(Number.parseInt(val.value))}>
+                                <SegmentGroup.Indicator />
+                                    <SegmentGroup.Item key="list" value="1">
+                                    <SegmentGroup.ItemText>1</SegmentGroup.ItemText>
+                                    <SegmentGroup.ItemHiddenInput />
+                                </SegmentGroup.Item>
+                                <SegmentGroup.Indicator />
+                                    <SegmentGroup.Item key="2" value="2">
+                                    <SegmentGroup.ItemText>2</SegmentGroup.ItemText>
+                                    <SegmentGroup.ItemHiddenInput />
+                                </SegmentGroup.Item>
+                                <SegmentGroup.Indicator />
+                                    <SegmentGroup.Item key="3" value="3">
+                                    <SegmentGroup.ItemText>3</SegmentGroup.ItemText>
+                                    <SegmentGroup.ItemHiddenInput />
+                                </SegmentGroup.Item>
+                            </SegmentGroup.Root>
+                    </Field.Root>
+                </Box>
+                </Flex>
+                <Box gridColumnGap="2" gridRowGap="2" display="grid" gridTemplateColumns={gc}>
+                    {props.components.filter(x => {
+                        if (shownType === 'All') {
+                            return true;
+                        }
+                        if (shownType === 'Sources') {
+                            return x.mode === 'source';
+                        }
+                        return x.mode === 'client';
+                    }).map(x => props.fetchable ? <MSErrorBoundary><MSComponentSummaryFetchable key={x.id} componentId={x.id} data={x}/></MSErrorBoundary> : <MSComponentSummary data={x} key={x.uid} />)}
+                </Box>
+            </Stack>
+        </Container>
     )
 }
 
diff --git a/src/stories/pages/ComponentList.stories.tsx b/src/stories/pages/ComponentList.stories.tsx
index 3f31fff4..777f6ddf 100644
--- a/src/stories/pages/ComponentList.stories.tsx
+++ b/src/stories/pages/ComponentList.stories.tsx
@@ -1,7 +1,6 @@
 import preview from "../../../.storybook/preview.js";
 import React from 'react';
 
-import { Container } from '@chakra-ui/react';
 import { MSComponentList } from "../../client/components/msComponent/MSComponentList.js";
 import {Provider} from "../../client/components/Provider.js";
 import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../../core/tests/utils/apiFixtures.js";
@@ -46,7 +45,7 @@ const meta = preview.meta({
     },
 decorators: [
     withRouter,
-    (Story) => (<Provider><Container maxWidth="8xl"><SSEProvider<MsSseEvent> options={sseProviderOptions}><Story/></SSEProvider></Container></Provider>),
+    (Story) => (<Provider><SSEProvider<MsSseEvent> options={sseProviderOptions}><Story/></SSEProvider></Provider>),
   ]
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
 });