design: log panes wrap their lines instead of scrolling sideways

The owner, 2026-10-16, a phone screenshot of an outbound message's Delivery
log: "На телефоне при просмотре лога, появляются две полосы. Мы это можем
поправить?" The two stripes are the horizontal scroll bars Chrome on
Android draws over a pre whose mail.log lines are wider than it
(overflow-x: auto); and what matters on a delivery line - status= and the
reply - was at its end, out of sight.

sp-log wraps (white-space: pre-wrap, overflow-wrap: anywhere) and no longer
scrolls; each line is a block, sp-ll, with a hanging indent of 4ch, so the
rest of a wrapped line stands under its start and a new line is told by its
time at the left. The line keeps its newline inside its block, so copied
text still has one line per line. Every pane of the kit: components,
system-log, out-message, in-quarantine-message. check.py: 0 violations.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
mix
2026-10-16 14:15:10 +03:00
co-authored by Claude Opus 5.5
parent 295d72e721
commit 216f366dfa
9 changed files with 59 additions and 47 deletions
@@ -40,13 +40,14 @@
<div class="box">
<div class="sp-box-head"><span class="sp-no">03</span><h2>Headers</h2><div class="sp-end">The body and attachments are never rendered in the panel</div></div>
<pre class="sp-log"><span class="sp-d">Received:</span> from mail.partner-billing.example (unknown [203.0.113.140]) by mail.example.org
<span class="sp-d">From:</span> "Partner Billing" &lt;invoice@partner-billing.example&gt;
<span class="sp-d">Reply-To:</span> <span class="sp-w">payments.dept@freemail.example</span>
<span class="sp-d">To:</span> owner@lists.example.org
<span class="sp-d">Subject:</span> Outstanding invoice — action required
<span class="sp-d">Date:</span> Mon, 21 Sep 2026 13:58:57 +0000
<span class="sp-d">Authentication-Results:</span> <span class="sp-e">spf=fail dkim=none dmarc=fail</span></pre>
<pre class="sp-log"><span class="sp-ll"><span class="sp-d">Received:</span> from mail.partner-billing.example (unknown [203.0.113.140]) by mail.example.org
</span><span class="sp-ll"><span class="sp-d">From:</span> "Partner Billing" &lt;invoice@partner-billing.example&gt;
</span><span class="sp-ll"><span class="sp-d">Reply-To:</span> <span class="sp-w">payments.dept@freemail.example</span>
</span><span class="sp-ll"><span class="sp-d">To:</span> owner@lists.example.org
</span><span class="sp-ll"><span class="sp-d">Subject:</span> Outstanding invoice — action required
</span><span class="sp-ll"><span class="sp-d">Date:</span> Mon, 21 Sep 2026 13:58:57 +0000
</span><span class="sp-ll"><span class="sp-d">Authentication-Results:</span> <span class="sp-e">spf=fail dkim=none dmarc=fail</span>
</span></pre>
</div>
<div class="columns">