feat(timeline): update width of content wrapper

Author: PixeledCode

packages/paste-core/components/timeline/src/TimelineItem.tsx

@@ -76,6 +76,7 @@ const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(
           flexDirection="column"
           columnGap="space10"
           paddingBottom="space60"
+          width="100%"
         >
           {onClick ? (
             <Button
@@ -93,6 +94,7 @@ const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(
               _focus={{ color: "colorTextLink", boxShadow: "shadowFocus" }}
               _disabled={{ color: "colorTextWeaker" }}
               disabled={disabled}
+              display="block"
             >
               <Truncate title={title}>{title}</Truncate>
             </Button>

packages/paste-core/components/timeline/src/TimelineItemGroup.tsx

@@ -30,7 +30,7 @@ export const TimelineItemGroup = React.forwardRef<HTMLLIElement, TimelineItemGro
           <TimelineItemIcon icon={icon} />
         </Box>
 
-        <Box element={`${element}_CONTENT_WRAPPER`}>
+        <Box element={`${element}_CONTENT_WRAPPER`} width="100%">
           <Box element={`${element}_TIMESTAMP`} marginTop="space10" marginBottom="space30">
             <DetailText element={`${element}_TIMESTAMP_DETAIL_TEXT`} marginTop="space0">
               {timestamp}

packages/paste-core/components/timeline/stories/index.stories.tsx

@@ -105,7 +105,7 @@ export const TimelineGrouped = (): React.ReactNode => {
 
 export const TimelineInteractive = (): React.ReactNode => {
   return (
-    <Box maxWidth="200px">
+    <Box maxWidth="300px">
       <Timeline>
         <TimelineItemGroup timestamp="Today – Wednesday, April 9, 2025">
           <TimelineItem title="Invoice billing issue for March cycle resolved" timestamp="9:12 AM" onClick={() => {}} />