fix(timeline): ensure consistent vertical line lengths with visible arrowheads

- Fixed inconsistent vertical line lengths in timeline diagrams
- All vertical lines now extend to same depth regardless of event count
- Added sufficient padding for clear visibility of dashed lines and arrowheads
- Added comprehensive test case and demo example

Fixes #6610

packages/mermaid/src/diagrams/timeline/timelineRenderer.ts

@@ -126,6 +126,10 @@ export const draw = function (text: string, id: string, version: string, diagObj
       };
       maxEventLineLengthTemp += svgDraw.getVirtualNodeHeight(svg, eventNode, conf);
     }
+    // Add spacing between events (10px per event except the last one)
+    if (task.events.length > 0) {
+      maxEventLineLengthTemp += (task.events.length - 1) * 10;
+    }
     maxEventLineLength = Math.max(maxEventLineLength, maxEventLineLengthTemp);
   }
 
@@ -285,16 +289,9 @@ export const drawTasks = function (
       lineWrapper
         .append('line')
         .attr('x1', masterX + 190 / 2)
-        .attr('y1', masterY + maxTaskHeight) // One section head + one task + margins
-        .attr('x2', masterX + 190 / 2) // Subtract stroke width so arrow point is retained
-        .attr(
-          'y2',
-          masterY +
-            maxTaskHeight +
-            (isWithoutSections ? maxTaskHeight : maxSectionHeight) +
-            maxEventLineLength +
-            120
-        )
+        .attr('y1', masterY + maxTaskHeight) // Start from bottom of task box
+        .attr('x2', masterX + 190 / 2) // Same x coordinate for vertical line
+        .attr('y2', masterY + maxTaskHeight + 100 + maxEventLineLength + 100) // End at consistent depth with ample padding for visible dashed lines and arrowheads
         .attr('stroke-width', 2)
         .attr('stroke', 'black')
         .attr('marker-end', 'url(#arrowhead)')