feat: introduce line overhang configuration

Author: stampaaaron

src/components/Timeline.css

@@ -1,6 +1,7 @@
 :where(.timeline) {
   --line-width: 0.2rem;
   --line-color: black;
+  --line-overhang: 1rem;
   --marker-size: 1rem;
   --marker-color: var(--line-color);
   --marker-radius: 50%;
@@ -12,11 +13,9 @@
   --card-offset: 1rem;
   --card-shadow: unset;
   --card-padding: 1rem;
-  --gap: 1rem;
   --offset-left: 0;
   --offset-right: 5rem;
-
-  position: relative;
+  --gap: 1rem;
 }
 
 .timeline {
@@ -45,6 +44,7 @@
 
 .timeline__items-container {
   display: flex;
+  padding-block: var(--line-overhang);
   flex-direction: column;
   gap: var(--gap);
   flex: 1;

src/components/Timeline.stories.tsx

@@ -169,6 +169,9 @@ export const SpacingOptions: StoryObj<typeof Timeline> = {
       pointer: {
         offset: '4rem',
       },
+      line: {
+        overhang: '4rem',
+      },
     },
     minMarkerGap: 150,
   },

src/models/style.ts

@@ -4,6 +4,7 @@ export type StyleConfig = {
   line?: {
     width?: string;
     color?: string;
+    overhang?: string;
   };
   gap?: string;
   offset?: {