From fa22a8786a33afcc118750f015874bf7a5a06ec8 Mon Sep 17 00:00:00 2001
From: lew <lew@ily.rs>
Date: Fri, 27 Mar 2026 15:28:41 +0000
Subject: [PATCH] fix: multi-line guestbook entries misaligned

---
 www/src/pages/index.astro |  6 +++---
 www/src/styles/global.css | 13 +++++++++----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/www/src/pages/index.astro b/www/src/pages/index.astro
index 0896843..7971199 100644
--- a/www/src/pages/index.astro
+++ b/www/src/pages/index.astro
@@ -62,13 +62,13 @@ const urls = [
 </section>
 
 <section data-section={SECTIONS.guestbook}>
-<pre class="guestbook-entries" set:html={guestbookEntries.map((e, i) => {
+<div class="guestbook-entries" style={`--meta-width: ${labelWidth + 12}ch`} set:html={guestbookEntries.map((e, i) => {
   const prefix = i === 0 ? labelPrefix(SECTIONS.guestbook, `?just=${SECTIONS.guestbook}`) : blankPrefix;
   const safeName = escapeHtml(e.name);
   const safeMessage = escapeHtml(e.message.replace(/\n/g, ' '));
   const nameHtml = e.url ? `<a href="${escapeHtml(e.url)}"><b>${safeName}</b></a>` : `<b>${safeName}</b>`;
-  return `<span class="guestbook-entry" style="padding-left: ${labelWidth + 12}ch; text-indent: -${labelWidth + 12}ch;"><span class="list-meta">${prefix}<span class="muted">${formatDate(e.createdAt)}</span>  </span>${nameHtml} ${safeMessage}</span>`;
-}).join('')} />
+  return `<span class="guestbook-entry"><span class="list-meta">${prefix}<span class="muted">${formatDate(e.createdAt)}</span>  </span><span>${nameHtml} ${safeMessage}</span></span>`;
+}).join('')} /></div>
   <form id="guestbook-form" class="guestbook-form" style={`margin-left: ${labelWidth + 12}ch`}>
     <label class="sr-only" for="gb-name">name</label>
     <input id="gb-name" type="text" name="name" placeholder="name" required maxlength="100" /><br />
diff --git a/www/src/styles/global.css b/www/src/styles/global.css
index 7a1054d..070f590 100644
--- a/www/src/styles/global.css
+++ b/www/src/styles/global.css
@@ -103,11 +103,17 @@ section pre {
 }
 
 .guestbook-entries {
-  white-space: pre-wrap;
+  font-family: monospace;
+  white-space: pre;
 }
 
 .guestbook-entry {
-  display: block;
+  display: grid;
+  grid-template-columns: var(--meta-width) 1fr;
+}
+
+.guestbook-entry > span:last-child {
+  white-space: normal;
 }
 
 .guestbook-form {
@@ -119,8 +125,7 @@ html[data-compact] .list-meta {
   display: none;
 }
 html[data-compact] .guestbook-entry {
-  padding-left: 0 !important;
-  text-indent: 0 !important;
+  display: block;
 }
 html[data-compact] .guestbook-form {
   margin-left: 0 !important;