Render email metadata as real tables and redesign the shell

Metadata blocks were divs styled with display:table. Nested blocks and
orphan cells created phantom columns that squeezed the value column to
a character or two. Every metadata block is now a real <table>/<tr>/<td>,
which mail clients lay out reliably, and the value column always fills
the remaining width.

The shared shell gets a gradient hero header, timestamp pill, dark
frame, and refreshed section, card, and code-block styling.
This commit is contained in:
Andy Dixon
2026-09-12 18:47:20 +01:00
parent ae9348c0ad
commit b3da9fbb25
6 changed files with 476 additions and 471 deletions
+14 -14
View File
@@ -152,20 +152,20 @@ if (empty($html)) {
<!-- Request Information Section -->
<div class="section">
<div class="section-title">📋 Request Information</div>
<div class="metadata">
<div class="metadata-row">
<div class="metadata-label">IP Address</div>
<div class="metadata-value">$ipAddressSafe</div>
</div>
<div class="metadata-row">
<div class="metadata-label">Method</div>
<div class="metadata-value">$requestMethodSafe</div>
</div>
<div class="metadata-row">
<div class="metadata-label">Content-Type</div>
<div class="metadata-value">$contentTypeSafe</div>
</div>
</div>
<table class="metadata" role="presentation" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="metadata-label">IP Address</td>
<td class="metadata-value">$ipAddressSafe</td>
</tr>
<tr>
<td class="metadata-label">Method</td>
<td class="metadata-value">$requestMethodSafe</td>
</tr>
<tr>
<td class="metadata-label">Content-Type</td>
<td class="metadata-value">$contentTypeSafe</td>
</tr>
</table>
</div>
<!-- Request Headers Section -->