From 216f366dfad8a80728932e02d75a05ad19f2591d Mon Sep 17 00:00:00 2001 From: Mix Date: Fri, 16 Oct 2026 14:15:10 +0300 Subject: [PATCH] design: log panes wrap their lines instead of scrolling sideways MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../panel-redesign/panel/components.html | 7 ++++--- .../panel/in-quarantine-message.html | 15 ++++++++------- .../panel-redesign/panel/out-message.html | 9 +++++---- .../panel-redesign/panel/src/components.html | 7 ++++--- .../panel/src/in-quarantine-message.html | 15 ++++++++------- .../panel-redesign/panel/src/out-message.html | 9 +++++---- .../panel-redesign/panel/src/system-log.html | 19 ++++++++++--------- .../panel-redesign/panel/system-log.html | 19 ++++++++++--------- docs/assets/panel-redesign/panel/theme.css | 6 +++++- 9 files changed, 59 insertions(+), 47 deletions(-) diff --git a/docs/assets/panel-redesign/panel/components.html b/docs/assets/panel-redesign/panel/components.html index e424e4a..6cc384f 100644 --- a/docs/assets/panel-redesign/panel/components.html +++ b/docs/assets/panel-redesign/panel/components.html @@ -182,9 +182,10 @@
09

log_pane

sp-d time · sp-w warning · sp-e error
-
13:58:07 an ordinary line
-13:58:09 a deferred delivery — sp-w
-13:57:41 a reject or a bounce — sp-e
+
13:58:07 an ordinary line
+13:58:09 a deferred delivery — sp-w
+13:57:41 a reject or a bounce — sp-e
+
diff --git a/docs/assets/panel-redesign/panel/in-quarantine-message.html b/docs/assets/panel-redesign/panel/in-quarantine-message.html index 55846f8..4a8d55f 100644 --- a/docs/assets/panel-redesign/panel/in-quarantine-message.html +++ b/docs/assets/panel-redesign/panel/in-quarantine-message.html @@ -106,13 +106,14 @@
03

Headers

The body and attachments are never rendered in the panel
-
Received: from mail.partner-billing.example (unknown [203.0.113.140]) by mail.example.org
-From: "Partner Billing" <invoice@partner-billing.example>
-Reply-To: payments.dept@freemail.example
-To: owner@lists.example.org
-Subject: Outstanding invoice — action required
-Date: Mon, 21 Sep 2026 13:58:57 +0000
-Authentication-Results: spf=fail dkim=none dmarc=fail
+
Received: from mail.partner-billing.example (unknown [203.0.113.140]) by mail.example.org
+From: "Partner Billing" <invoice@partner-billing.example>
+Reply-To: payments.dept@freemail.example
+To: owner@lists.example.org
+Subject: Outstanding invoice — action required
+Date: Mon, 21 Sep 2026 13:58:57 +0000
+Authentication-Results: spf=fail dkim=none dmarc=fail
+
diff --git a/docs/assets/panel-redesign/panel/out-message.html b/docs/assets/panel-redesign/panel/out-message.html index 6fb6e05..5601642 100644 --- a/docs/assets/panel-redesign/panel/out-message.html +++ b/docs/assets/panel-redesign/panel/out-message.html @@ -105,10 +105,11 @@
03

Delivery log

Lines from mail.log with this queue id
-
13:58:07 postfix/smtpd[2114]: 4XcB7k2Jm9z1: client=unknown[198.51.100.7], sasl_username=alerts
-13:58:07 postfix/cleanup[2120]: 4XcB7k2Jm9z1: message-id=<a81f0c@alertmanager>
-13:58:07 postfix/qmgr[2061]: 4XcB7k2Jm9z1: from=<alerts@example.org>, size=2214, nrcpt=1 (queue active)
-13:58:09 postfix/smtp[2123]: 4XcB7k2Jm9z1: to=<noc@example.org>, relay=mx1.example.org[192.0.2.10]:25, delay=1.9, status=deferred (host mx1.example.org said: 451 4.7.1 Greylisted, try again in 5 minutes)
+
13:58:07 postfix/smtpd[2114]: 4XcB7k2Jm9z1: client=unknown[198.51.100.7], sasl_username=alerts
+13:58:07 postfix/cleanup[2120]: 4XcB7k2Jm9z1: message-id=<a81f0c@alertmanager>
+13:58:07 postfix/qmgr[2061]: 4XcB7k2Jm9z1: from=<alerts@example.org>, size=2214, nrcpt=1 (queue active)
+13:58:09 postfix/smtp[2123]: 4XcB7k2Jm9z1: to=<noc@example.org>, relay=mx1.example.org[192.0.2.10]:25, delay=1.9, status=deferred (host mx1.example.org said: 451 4.7.1 Greylisted, try again in 5 minutes)
+
diff --git a/docs/assets/panel-redesign/panel/src/components.html b/docs/assets/panel-redesign/panel/src/components.html index bb41e1b..5732769 100644 --- a/docs/assets/panel-redesign/panel/src/components.html +++ b/docs/assets/panel-redesign/panel/src/components.html @@ -116,9 +116,10 @@
09

log_pane

sp-d time · sp-w warning · sp-e error
-
13:58:07 an ordinary line
-13:58:09 a deferred delivery — sp-w
-13:57:41 a reject or a bounce — sp-e
+
13:58:07 an ordinary line
+13:58:09 a deferred delivery — sp-w
+13:57:41 a reject or a bounce — sp-e
+
diff --git a/docs/assets/panel-redesign/panel/src/in-quarantine-message.html b/docs/assets/panel-redesign/panel/src/in-quarantine-message.html index ebdf86d..a4a3802 100644 --- a/docs/assets/panel-redesign/panel/src/in-quarantine-message.html +++ b/docs/assets/panel-redesign/panel/src/in-quarantine-message.html @@ -40,13 +40,14 @@
03

Headers

The body and attachments are never rendered in the panel
-
Received: from mail.partner-billing.example (unknown [203.0.113.140]) by mail.example.org
-From: "Partner Billing" <invoice@partner-billing.example>
-Reply-To: payments.dept@freemail.example
-To: owner@lists.example.org
-Subject: Outstanding invoice — action required
-Date: Mon, 21 Sep 2026 13:58:57 +0000
-Authentication-Results: spf=fail dkim=none dmarc=fail
+
Received: from mail.partner-billing.example (unknown [203.0.113.140]) by mail.example.org
+From: "Partner Billing" <invoice@partner-billing.example>
+Reply-To: payments.dept@freemail.example
+To: owner@lists.example.org
+Subject: Outstanding invoice — action required
+Date: Mon, 21 Sep 2026 13:58:57 +0000
+Authentication-Results: spf=fail dkim=none dmarc=fail
+
diff --git a/docs/assets/panel-redesign/panel/src/out-message.html b/docs/assets/panel-redesign/panel/src/out-message.html index a2bead1..52fe156 100644 --- a/docs/assets/panel-redesign/panel/src/out-message.html +++ b/docs/assets/panel-redesign/panel/src/out-message.html @@ -39,8 +39,9 @@
03

Delivery log

Lines from mail.log with this queue id
-
13:58:07 postfix/smtpd[2114]: 4XcB7k2Jm9z1: client=unknown[198.51.100.7], sasl_username=alerts
-13:58:07 postfix/cleanup[2120]: 4XcB7k2Jm9z1: message-id=<a81f0c@alertmanager>
-13:58:07 postfix/qmgr[2061]: 4XcB7k2Jm9z1: from=<alerts@example.org>, size=2214, nrcpt=1 (queue active)
-13:58:09 postfix/smtp[2123]: 4XcB7k2Jm9z1: to=<noc@example.org>, relay=mx1.example.org[192.0.2.10]:25, delay=1.9, status=deferred (host mx1.example.org said: 451 4.7.1 Greylisted, try again in 5 minutes)
+
13:58:07 postfix/smtpd[2114]: 4XcB7k2Jm9z1: client=unknown[198.51.100.7], sasl_username=alerts
+13:58:07 postfix/cleanup[2120]: 4XcB7k2Jm9z1: message-id=<a81f0c@alertmanager>
+13:58:07 postfix/qmgr[2061]: 4XcB7k2Jm9z1: from=<alerts@example.org>, size=2214, nrcpt=1 (queue active)
+13:58:09 postfix/smtp[2123]: 4XcB7k2Jm9z1: to=<noc@example.org>, relay=mx1.example.org[192.0.2.10]:25, delay=1.9, status=deferred (host mx1.example.org said: 451 4.7.1 Greylisted, try again in 5 minutes)
+
diff --git a/docs/assets/panel-redesign/panel/src/system-log.html b/docs/assets/panel-redesign/panel/src/system-log.html index 8258a7d..6e0b354 100644 --- a/docs/assets/panel-redesign/panel/src/system-log.html +++ b/docs/assets/panel-redesign/panel/src/system-log.html @@ -9,13 +9,14 @@
01

Recent lines

Last 200 · refreshes every 10 s
-
Sep 21 14:01:52 postfix/smtp[2131]: 4XcB9q0Lw2z1: to=<m.keller@gmx.de>, relay=mx00.gmx.net[212.227.15.9]:25, delay=0.8, status=sent (250 Requested mail action okay)
-Sep 21 14:01:52 postfix/qmgr[58]: 4XcB9q0Lw2z1: removed
-Sep 21 14:00:18 postfix/smtpd[2129]: connect from mail.uni.example[192.0.2.77]
-Sep 21 14:00:18 postfix/smtp[2130]: 4XcB8z5Tn1z1: to=<dev@lists.example.org>, relay=mx.internal[10.0.4.2]:25, status=sent (250 2.0.0 Ok: queued)
-Sep 21 13:58:09 postfix/smtp[2123]: 4XcB7k2Jm9z1: to=<noc@example.org>, relay=mx1.example.org[192.0.2.10]:25, status=deferred (451 4.7.1 Greylisted, try again in 5 minutes)
-Sep 21 13:57:41 postfix/smtpd[2119]: NOQUEUE: reject: RCPT from bulk.example[198.51.100.90]: 550 5.1.1 <sales@lists.example.org>: Recipient address rejected: unknown recipient
-Sep 21 13:44:02 postfix/smtp[2101]: 4XcB2m7Hd4z1: to=<jobs@acme.io>, relay=none, status=deferred (connect to 10.0.4.12[10.0.4.12]:2525: Connection timed out)
-Sep 21 13:41:19 postfix/smtp[2098]: 4XcB1c3Rk8z1: to=<j.doe@nonexistent.example>, status=bounced (Host or domain name not found)
-Sep 21 13:40:02 journal-milter[40]: rate limit: app=prod-server 201/200 in 3600s — tempfail at MAIL FROM
+
Sep 21 14:01:52 postfix/smtp[2131]: 4XcB9q0Lw2z1: to=<m.keller@gmx.de>, relay=mx00.gmx.net[212.227.15.9]:25, delay=0.8, status=sent (250 Requested mail action okay)
+Sep 21 14:01:52 postfix/qmgr[58]: 4XcB9q0Lw2z1: removed
+Sep 21 14:00:18 postfix/smtpd[2129]: connect from mail.uni.example[192.0.2.77]
+Sep 21 14:00:18 postfix/smtp[2130]: 4XcB8z5Tn1z1: to=<dev@lists.example.org>, relay=mx.internal[10.0.4.2]:25, status=sent (250 2.0.0 Ok: queued)
+Sep 21 13:58:09 postfix/smtp[2123]: 4XcB7k2Jm9z1: to=<noc@example.org>, relay=mx1.example.org[192.0.2.10]:25, status=deferred (451 4.7.1 Greylisted, try again in 5 minutes)
+Sep 21 13:57:41 postfix/smtpd[2119]: NOQUEUE: reject: RCPT from bulk.example[198.51.100.90]: 550 5.1.1 <sales@lists.example.org>: Recipient address rejected: unknown recipient
+Sep 21 13:44:02 postfix/smtp[2101]: 4XcB2m7Hd4z1: to=<jobs@acme.io>, relay=none, status=deferred (connect to 10.0.4.12[10.0.4.12]:2525: Connection timed out)
+Sep 21 13:41:19 postfix/smtp[2098]: 4XcB1c3Rk8z1: to=<j.doe@nonexistent.example>, status=bounced (Host or domain name not found)
+Sep 21 13:40:02 journal-milter[40]: rate limit: app=prod-server 201/200 in 3600s — tempfail at MAIL FROM
+
diff --git a/docs/assets/panel-redesign/panel/system-log.html b/docs/assets/panel-redesign/panel/system-log.html index 53678c3..03cef7a 100644 --- a/docs/assets/panel-redesign/panel/system-log.html +++ b/docs/assets/panel-redesign/panel/system-log.html @@ -75,15 +75,16 @@
01

Recent lines

Last 200 · refreshes every 10 s
-
Sep 21 14:01:52 postfix/smtp[2131]: 4XcB9q0Lw2z1: to=<m.keller@gmx.de>, relay=mx00.gmx.net[212.227.15.9]:25, delay=0.8, status=sent (250 Requested mail action okay)
-Sep 21 14:01:52 postfix/qmgr[58]: 4XcB9q0Lw2z1: removed
-Sep 21 14:00:18 postfix/smtpd[2129]: connect from mail.uni.example[192.0.2.77]
-Sep 21 14:00:18 postfix/smtp[2130]: 4XcB8z5Tn1z1: to=<dev@lists.example.org>, relay=mx.internal[10.0.4.2]:25, status=sent (250 2.0.0 Ok: queued)
-Sep 21 13:58:09 postfix/smtp[2123]: 4XcB7k2Jm9z1: to=<noc@example.org>, relay=mx1.example.org[192.0.2.10]:25, status=deferred (451 4.7.1 Greylisted, try again in 5 minutes)
-Sep 21 13:57:41 postfix/smtpd[2119]: NOQUEUE: reject: RCPT from bulk.example[198.51.100.90]: 550 5.1.1 <sales@lists.example.org>: Recipient address rejected: unknown recipient
-Sep 21 13:44:02 postfix/smtp[2101]: 4XcB2m7Hd4z1: to=<jobs@acme.io>, relay=none, status=deferred (connect to 10.0.4.12[10.0.4.12]:2525: Connection timed out)
-Sep 21 13:41:19 postfix/smtp[2098]: 4XcB1c3Rk8z1: to=<j.doe@nonexistent.example>, status=bounced (Host or domain name not found)
-Sep 21 13:40:02 journal-milter[40]: rate limit: app=prod-server 201/200 in 3600s — tempfail at MAIL FROM
+
Sep 21 14:01:52 postfix/smtp[2131]: 4XcB9q0Lw2z1: to=<m.keller@gmx.de>, relay=mx00.gmx.net[212.227.15.9]:25, delay=0.8, status=sent (250 Requested mail action okay)
+Sep 21 14:01:52 postfix/qmgr[58]: 4XcB9q0Lw2z1: removed
+Sep 21 14:00:18 postfix/smtpd[2129]: connect from mail.uni.example[192.0.2.77]
+Sep 21 14:00:18 postfix/smtp[2130]: 4XcB8z5Tn1z1: to=<dev@lists.example.org>, relay=mx.internal[10.0.4.2]:25, status=sent (250 2.0.0 Ok: queued)
+Sep 21 13:58:09 postfix/smtp[2123]: 4XcB7k2Jm9z1: to=<noc@example.org>, relay=mx1.example.org[192.0.2.10]:25, status=deferred (451 4.7.1 Greylisted, try again in 5 minutes)
+Sep 21 13:57:41 postfix/smtpd[2119]: NOQUEUE: reject: RCPT from bulk.example[198.51.100.90]: 550 5.1.1 <sales@lists.example.org>: Recipient address rejected: unknown recipient
+Sep 21 13:44:02 postfix/smtp[2101]: 4XcB2m7Hd4z1: to=<jobs@acme.io>, relay=none, status=deferred (connect to 10.0.4.12[10.0.4.12]:2525: Connection timed out)
+Sep 21 13:41:19 postfix/smtp[2098]: 4XcB1c3Rk8z1: to=<j.doe@nonexistent.example>, status=bounced (Host or domain name not found)
+Sep 21 13:40:02 journal-milter[40]: rate limit: app=prod-server 201/200 in 3600s — tempfail at MAIL FROM
+
diff --git a/docs/assets/panel-redesign/panel/theme.css b/docs/assets/panel-redesign/panel/theme.css index baabf2c..f7eca62 100644 --- a/docs/assets/panel-redesign/panel/theme.css +++ b/docs/assets/panel-redesign/panel/theme.css @@ -238,8 +238,12 @@ details.sp-record[open] .sp-record-toggle span + span { display: inline; } /* ---- logs, timeline, help */ .sp-log { margin: 0; padding: 1rem 1.25rem; background: #191c21; color: #d9d5cc; border-radius: 0; - font-family: var(--sp-mono); font-size: var(--sp-fs-s); line-height: 1.6; overflow-x: auto; white-space: pre; + font-family: var(--sp-mono); font-size: var(--sp-fs-s); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } +/* One line of a log: long ones wrap inside the pane, the rest of the line + indented under its start, so nothing scrolls sideways - a phone drew the + scroll bars over the text (owner, 2026-10-16). */ +.sp-log .sp-ll { display: block; padding-left: 4ch; text-indent: -4ch; } .sp-log .sp-w { color: #e0b15c; } .sp-log .sp-e { color: #ef8f82; } .sp-log .sp-d { color: #7f8894; } .sp-timeline { list-style: none; margin: 0; padding: 0; } .sp-timeline li { position: relative; padding: 0 0 1.1rem 1.6rem; border-left: 2px solid var(--sp-rule); margin-left: .4rem; }