From eaad7f844cd64456f6ed1a7eccfe6f79cdf5d305 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Fri, 15 May 2026 13:43:00 +0200
Subject: [PATCH] Round rail ends; drop arrowhead lower and shift right
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Two new stub rows now bookend each section's rail. The top
  cap is a 4px-high TR whose rail TD carries border-top-left/
  -right-radius so the rail's top end visually rounds off.
  The bottom cap is an 18px-high TR with border-bottom-left/
  -right-radius so the rail's tail tapers into a rounded stop
  beneath the last card.
- The chevron arrowhead now lives in its own TR with no rail
  border, sitting 14px below the rounded rail-end and another
  ~18px of cell height below that — visibly separated from the
  rail rather than sitting flush against its tip.
- Chevron's horizontal offset shifted from -38 to -37 (one px
  right) and SVG width bumped to 26 to give the arrow a little
  more visual weight at its new lower position.
---
 resources/views/email.phtml | 71 +++++++++++++++++++++++++++----------
 1 file changed, 52 insertions(+), 19 deletions(-)

diff --git a/resources/views/email.phtml b/resources/views/email.phtml
index acf48ba..a7ed236 100644
--- a/resources/views/email.phtml
+++ b/resources/views/email.phtml
@@ -508,25 +508,52 @@ $card_open  = '<table role="presentation" cellpadding="0" cellspacing="0" border
     . 'style="width:100%;border-collapse:collapse;">';
 $card_close = '</table>';
 
-// 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'] . '"'
+// The rail visual is built from three pieces:
+//
+//   1. $timeline_top_cap     — a 4px tall stub at the start of the
+//      section whose border-top-left-radius rounds the top end of
+//      the rail.
+//   2. Event rows            — each carries the rail as a border-left
+//      on its right-hand TD; with border-collapse:collapse those
+//      adjacent borders merge into one continuous line.
+//   3. $timeline_bottom_cap  — a longer stub after the last event
+//      that extends the rail visually below the cards, with a
+//      border-bottom-left-radius rounding the bottom end.
+//
+// Then $timeline_arrow_row sits below the rail with no border (so
+// the rail terminates cleanly and the arrow is visually separated)
+// and renders the chevron arrowhead in inline SVG.
+$timeline_top_cap = '<tr>'
+    . '<td></td><td></td>'
+    . '<td style="height:4px;padding:0;'
+    . 'border-left:4px solid ' . $palette['rail'] . ';'
+    . 'border-top-left-radius:4px;border-top-right-radius:4px;'
+    . 'font-size:0;line-height:0;"></td>'
+    . '</tr>';
+
+$timeline_bottom_cap = '<tr>'
+    . '<td></td><td></td>'
+    . '<td style="height:18px;padding:0;'
+    . 'border-left:4px solid ' . $palette['rail'] . ';'
+    . 'border-bottom-left-radius:4px;border-bottom-right-radius:4px;'
+    . 'font-size:0;line-height:0;"></td>'
+    . '</tr>';
+
+// Chevron arrowhead — inline SVG, stroke-linecap:round +
+// stroke-linejoin:round so the strokes have soft ends. Sits below
+// the rail's rounded tail in its own row so the rail terminates
+// cleanly without the chevron's strokes painting over the round.
+$arrow_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="26" height="22"'
+    . ' viewBox="0 0 26 22" fill="none" stroke="' . $palette['rail'] . '"'
     . ' stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
-    . '<path d="M5 6 L12 15 L19 6"/>'
+    . '<path d="M5 6 L13 16 L21 6"/>'
     . '</svg>';
 
-$timeline_close_row = '<tr>'
-    . '<td></td>'
-    . '<td></td>'
-    . '<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;margin-left:-38px;margin-bottom:-2px;'
-    . 'vertical-align:bottom;">'
+$timeline_arrow_row = '<tr>'
+    . '<td></td><td></td>'
+    . '<td style="height:32px;padding:14px 0 0 24px;'
+    . 'font-size:0;line-height:0;vertical-align:top;text-align:left;">'
+    . '<span style="display:inline-block;margin-left:-37px;vertical-align:top;">'
     . $arrow_svg
     . '</span>'
     . '</td></tr>';
@@ -586,6 +613,7 @@ $timeline_close_row = '<tr>'
                         </p>
                         <?php if ($detailed !== []) : ?>
                             <?= $card_open ?>
+                                <?= $timeline_top_cap ?>
                                 <?php $prev_jd = null; ?>
                                 <?php foreach ($detailed as $fact) : ?>
                                     <?php
@@ -600,7 +628,8 @@ $timeline_close_row = '<tr>'
                                         echo $event_row($fact, $body, $show_dot);
                                     ?>
                                 <?php endforeach ?>
-                                <?= $timeline_close_row ?>
+                                <?= $timeline_bottom_cap ?>
+                                <?= $timeline_arrow_row ?>
                             <?= $card_close ?>
                         <?php endif ?>
                         <?php if ($summary !== []) : ?>
@@ -636,6 +665,7 @@ $timeline_close_row = '<tr>'
                         </p>
                         <?php if ($detailed !== []) : ?>
                             <?= $card_open ?>
+                                <?= $timeline_top_cap ?>
                                 <?php $prev_jd = null; ?>
                                 <?php foreach ($detailed as $fact) : ?>
                                     <?php
@@ -650,7 +680,8 @@ $timeline_close_row = '<tr>'
                                         echo $event_row($fact, $body, $show_dot);
                                     ?>
                                 <?php endforeach ?>
-                                <?= $timeline_close_row ?>
+                                <?= $timeline_bottom_cap ?>
+                                <?= $timeline_arrow_row ?>
                             <?= $card_close ?>
                         <?php endif ?>
                         <?php if ($summary !== []) : ?>
@@ -686,6 +717,7 @@ $timeline_close_row = '<tr>'
                         </p>
                         <?php if ($detailed !== []) : ?>
                             <?= $card_open ?>
+                                <?= $timeline_top_cap ?>
                                 <?php $prev_jd = null; ?>
                                 <?php foreach ($detailed as $fact) : ?>
                                     <?php
@@ -700,7 +732,8 @@ $timeline_close_row = '<tr>'
                                         echo $event_row($fact, $body, $show_dot);
                                     ?>
                                 <?php endforeach ?>
-                                <?= $timeline_close_row ?>
+                                <?= $timeline_bottom_cap ?>
+                                <?= $timeline_arrow_row ?>
                             <?= $card_close ?>
                         <?php endif ?>
                         <?php if ($summary !== []) : ?>