chore: improve styling

Author: stampaaaron

src/components/Timeline.css

@@ -12,7 +12,7 @@
   position: relative;
 }
 
-div.timeline__line {
+.timeline__line {
   background-color: black;
   width: var(--timeline-line-width);
   height: 100%;
@@ -33,13 +33,24 @@ div.timeline__line {
   right: 0;
 }
 
-.timeline-item__content {
+.timeline-card {
   border: 0.2rem solid black;
   padding: 1rem;
+  display: flex;
+  flex-direction: column;
   flex: 1;
 }
 
-div.timeline-item__marker {
+.timeline-card img {
+  width: 100%;
+  height: auto;
+}
+
+.timeline-card__date {
+  margin-left: auto;
+}
+
+.timeline-item__marker {
   position: relative;
   height: var(--marker-line-width);
   margin-top: 2rem;

src/components/Timeline.stories.mdx

@@ -3,6 +3,8 @@ import { Timeline } from './Timeline';
 
 <Meta title="Timeline" component={Timeline} />
 
+<Story name="Basic">
+
 <Timeline
   items={[
     {
@@ -45,3 +47,5 @@ import { Timeline } from './Timeline';
 
 ]}
 />
+
+</Story>

src/components/TimelineItem.tsx

@@ -14,8 +14,8 @@ export const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(({ cla
   return (
     <div ref={ref} className={['timeline-item', className].join(' ')}>
       <div className="timeline-item__marker" />
-      <div className="timeline-item__content">
-        <p>{date.toISOString()}</p>
+      <div className="timeline-card">
+        <p className="timeline-card__date">{date.toISOString()}</p>
         <p>{title}</p>
         {children}
       </div>