From 6bad52e68db9b449ae914affd70c56e969202bf3 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Fri, 15 May 2026 13:37:38 +0200
Subject: [PATCH] Centre dot + arrow on rail; chevron arrowhead with rounded
 caps

- Bumped the dot's margin-left from -31 to -33 so its centre
  lands on the rail's centre (the border-collapsed 4px border
  effectively leaves 26px between rail centre and content-start;
  half of a 14px dot is 7px, so margin = -(26+7)). margin-right
  bumped to 16 to preserve the gap to the date text.
- Replaced the CSS-triangle arrowhead with an inline SVG chevron
  (stroke-linecap:round, stroke-linejoin:round, stroke-width:3)
  so the cap matches the rounded "v" arrow look the user asked
  for. SVG sits at the bottom of its cell with the same -38
  offset as the dot pile so dot, chevron and rail share a single
  vertical axis.
---
 resources/views/email.phtml | 36 ++++++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/resources/views/email.phtml b/resources/views/email.phtml
index 3ef724d..acf48ba 100644
--- a/resources/views/email.phtml
+++ b/resources/views/email.phtml
@@ -465,12 +465,19 @@ $event_row = static function (
 
         $parts = $date_parts($fact);
 
+        // The rail TD has padding-left:24 + border-left:4. Inline
+        // content therefore starts 26px right of the rail centre
+        // (with border-collapse:collapse the 4px border straddles the
+        // cell boundary, putting half its width into our cell). A
+        // 14px-wide dot wants margin-left = -(26 + 7) = -33 to land
+        // its centre on the rail.
         $dot_html = $show_dot
             ? '<span style="display:inline-block;width:14px;height:14px;background:'
                 . $palette['dot']
-                . ';border-radius:50%;margin-left:-31px;margin-right:14px;vertical-align:middle;'
-                . 'box-shadow:0 0 0 4px ' . $palette['bg'] . ';"></span>'
-            : '<span style="display:inline-block;width:14px;margin-left:-31px;margin-right:14px;vertical-align:middle;"></span>';
+                . ';border-radius:50%;margin-left:-33px;margin-right:16px;'
+                . 'vertical-align:middle;box-shadow:0 0 0 4px ' . $palette['bg'] . ';"></span>'
+            : '<span style="display:inline-block;width:14px;margin-left:-33px;'
+                . 'margin-right:16px;vertical-align:middle;"></span>';
 
         if ($show_dot) {
             $date_html =
@@ -501,18 +508,27 @@ $card_open  = '<table role="presentation" cellpadding="0" cellspacing="0" border
     . 'style="width:100%;border-collapse:collapse;">';
 $card_close = '</table>';
 
-// Downward-pointing CSS triangle, coloured to match the rail, used as
-// the closing arrow that visually caps each section's timeline.
+// Closing arrow that visually caps each section's timeline. Inline
+// SVG chevron with stroke-linecap:round so the line ends are blunted
+// — matches the look of UI arrowheads rather than a filled triangle.
+// margin-left mirrors the dot's offset so both elements sit on the
+// same vertical axis.
+$arrow_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20"'
+    . ' viewBox="0 0 24 20" fill="none" stroke="' . $palette['rail'] . '"'
+    . ' stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
+    . '<path d="M5 6 L12 15 L19 6"/>'
+    . '</svg>';
+
 $timeline_close_row = '<tr>'
     . '<td></td>'
     . '<td></td>'
-    . '<td style="height:18px;padding:0 14px 0 24px;'
+    . '<td style="height:24px;padding:0 14px 0 24px;'
     . 'border-left:4px solid ' . $palette['rail'] . ';'
     . 'font-size:0;line-height:0;vertical-align:bottom;">'
-    . '<span style="display:inline-block;width:0;height:0;'
-    . 'border-left:7px solid transparent;border-right:7px solid transparent;'
-    . 'border-top:11px solid ' . $palette['rail'] . ';'
-    . 'margin-left:-33px;margin-bottom:-1px;"></span>'
+    . '<span style="display:inline-block;margin-left:-38px;margin-bottom:-2px;'
+    . 'vertical-align:bottom;">'
+    . $arrow_svg
+    . '</span>'
     . '</td></tr>';
 
 ?><!doctype html>