Adds variants to storybook

Author: samejr

apps/webapp/app/routes/storybook.run-and-span-timeline/route.tsx

@@ -38,20 +38,23 @@ const spanTimelines = [
         timestamp: new Date(Date.now() - 5000),
         duration: 4000,
         adminOnly: false,
+        variant: "start-cap",
       },
       {
         name: "Launched",
         offset: 0,
         timestamp: new Date(Date.now() - 1000),
         duration: 1000,
         adminOnly: false,
+        variant: "dot-hollow",
       },
       {
         name: "Imported task file",
         offset: 0,
         timestamp: new Date(Date.now() - 1000),
         duration: 1000,
         adminOnly: true,
+        variant: "dot-hollow",
       },
     ],
   },
@@ -68,13 +71,15 @@ const spanTimelines = [
         timestamp: new Date(Date.now() - 5000),
         duration: 4000,
         adminOnly: false,
+        variant: "start-cap",
       },
       {
         name: "Forked",
         offset: 0,
         timestamp: new Date(Date.now() - 1000),
         duration: 1000,
         adminOnly: true,
+        variant: "dot-hollow",
       },
     ],
   },
@@ -91,13 +96,15 @@ const spanTimelines = [
         timestamp: new Date(Date.now() - 25 * 60 * 60 * 1000),
         duration: 4000,
         adminOnly: false,
+        variant: "start-cap",
       },
       {
         name: "Forked",
         offset: 0,
         timestamp: new Date(Date.now() - 1000),
         duration: 1000,
         adminOnly: true,
+        variant: "dot-hollow",
       },
     ],
   },
@@ -139,7 +146,7 @@ const runTimelines = [
 
 export default function Story() {
   return (
-    <div className="flex flex-col items-start gap-y-4 p-4">
+    <div className="flex flex-col items-start gap-y-8 p-4">
       <Header2>Span Timeline</Header2>
       {spanTimelines.map((props, index) => (
         <SpanTimeline key={index} {...props} />