diff --git a/src/client/components/PlayData.tsx b/src/client/components/PlayData.tsx
index 7945bb85..2d6e989c 100644
--- a/src/client/components/PlayData.tsx
+++ b/src/client/components/PlayData.tsx
@@ -97,7 +97,7 @@ export const PlayDataDataList = (props: { play: JsonPlayObject, dates: DisplayDa
 
     if (play.data.albumArtists !== undefined && play.data.albumArtists.length > 0) {
         albumArtistElm = (
-            <DataList.Item>
+            <DataList.Item flexGrow="1">
                 <DataList.ItemLabel>Album Artists</DataList.ItemLabel>
                 <DataList.ItemValue>
                     <HStack>{play.data.albumArtists.map((x, index) => {
@@ -119,39 +119,31 @@ export const PlayDataDataList = (props: { play: JsonPlayObject, dates: DisplayDa
     } = play;
 
     return (
-        <Flex gap="4" wrap="wrap">
-            <Box>
-                <DataList.Root>
-                    <DataList.Item>
-                        <DataList.ItemLabel flexShrink="1">Title</DataList.ItemLabel>
-                        <DataList.ItemValue>{play.data.track}</DataList.ItemValue>
-                    </DataList.Item>
-                    <DataList.Item>
-                        <DataList.ItemLabel>Artists</DataList.ItemLabel>
-                        <DataList.ItemValue>
-                            {artists.length === 0 ? <Text color="fg.muted">(No Artists)</Text> :
-                                <HStack>{play.data.artists.map((x, index) => {
-                                    return (
-                                        <Tag.Root key={index}>
-                                            <Tag.Label>{x}</Tag.Label>
-                                        </Tag.Root>
-                                    );
-                                })}</HStack>}
-                        </DataList.ItemValue>
-                    </DataList.Item>
-                    {albumArtistElm}
-                    <DataList.Item>
-                        <DataList.ItemLabel>Album</DataList.ItemLabel>
-                        <DataList.ItemValue>{play.data.album}</DataList.ItemValue>
-                    </DataList.Item>
-                </DataList.Root>
-            </Box>
-            <Box>
-                <DataList.Root>
-                    <PlayDatesStack play={play} dates={dates} />
-                </DataList.Root>
-            </Box>
-        </Flex>
+        <DataList.Root flexWrap="wrap" flexDirection="row">
+            <DataList.Item flexGrow="1">
+                <DataList.ItemLabel flexShrink="1">Title</DataList.ItemLabel>
+                <DataList.ItemValue>{play.data.track}</DataList.ItemValue>
+            </DataList.Item>
+            <DataList.Item flexGrow="1">
+                <DataList.ItemLabel>Artists</DataList.ItemLabel>
+                <DataList.ItemValue>
+                    {artists.length === 0 ? <Text color="fg.muted">(No Artists)</Text> :
+                        <HStack>{play.data.artists.map((x, index) => {
+                            return (
+                                <Tag.Root key={index}>
+                                    <Tag.Label>{x}</Tag.Label>
+                                </Tag.Root>
+                            );
+                        })}</HStack>}
+                </DataList.ItemValue>
+            </DataList.Item>
+            {albumArtistElm}
+            <DataList.Item flexGrow="1">
+                <DataList.ItemLabel>Album</DataList.ItemLabel>
+                <DataList.ItemValue>{play.data.album}</DataList.ItemValue>
+            </DataList.Item>
+            <PlayDatesStack play={play} dates={dates} />
+        </DataList.Root>
     )
 }
 
@@ -180,7 +172,7 @@ export const PlayDatesStack = (props: { play: JsonPlayObject, dates: DisplayDate
             dateElements.push((<TextMuted key="seen">{`Seen ${shortTodayAwareFormat(dayjs(play.data.playDate))}`}</TextMuted>));
         }
         datesItem = (
-            <DataList.Item>
+            <DataList.Item flexGrow="1">
                 <DataList.ItemLabel>Dates</DataList.ItemLabel>
                 <DataList.ItemValue>
                     <Stack gap="1">
diff --git a/src/stories/PlayInfo.stories.tsx b/src/stories/PlayInfo.stories.tsx
index f6aaf9a5..9651d5ce 100644
--- a/src/stories/PlayInfo.stories.tsx
+++ b/src/stories/PlayInfo.stories.tsx
@@ -2,8 +2,9 @@ import preview from "../../.storybook/preview.js";
 import React from 'react';
 
 import { fn } from 'storybook/test';
-import { PlayData, PlayInfoContainer } from "../client/components/PlayData.js";
+import { PlayData } from "../client/components/PlayData.js";
 import {Provider} from "../client/components/Provider";
+import { Container } from '@chakra-ui/react';
 import { generateArtists, generateJsonPlay, generatePlay } from "../core/PlayTestUtils.js"
 import clone from "clone";
 
@@ -14,7 +15,7 @@ type PropsAndCustomArgs = React.ComponentProps<typeof PlayData> & {
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = preview.type<{args: PropsAndCustomArgs}>().meta({
   title: 'Examples/PlayInfo',
-  component: PlayInfoContainer,
+  component: PlayData,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'padded',
@@ -22,7 +23,7 @@ const meta = preview.type<{args: PropsAndCustomArgs}>().meta({
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
 decorators: [
-    (Story) => (<Provider><Story/></Provider>),
+    (Story) => (<Provider><Container maxWidth="2xl"><Story/></Container></Provider>),
   ],
 args: {
     play: generateJsonPlay(),
@@ -50,6 +51,6 @@ export const PlayInfoStory = meta.story({
         args.final.data.albumArtists = aa;
       }
     }
-    return (<PlayInfoContainer {...args}/>) 
+    return (<PlayData {...args}/>) 
   }
 });
\ No newline at end of file