lew/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: multi-line guestbook entries misaligned

Browse source
This commit is contained in:
Lewis Wynne 2026-03-27 15:28:41 +00:00
parent 0029274484
commit fa22a8786a
2 changed files with 12 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

6
www/src/pages/index.astro
View file

@ -62,13 +62,13 @@ const urls = [
</section> </section>
<section data-section={SECTIONS.guestbook}> <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 prefix = i === 0 ? labelPrefix(SECTIONS.guestbook, `?just=${SECTIONS.guestbook}`) : blankPrefix;
const safeName = escapeHtml(e.name); const safeName = escapeHtml(e.name);
const safeMessage = escapeHtml(e.message.replace(/\n/g, ' ')); const safeMessage = escapeHtml(e.message.replace(/\n/g, ' '));
const nameHtml = e.url ? `<a href="${escapeHtml(e.url)}"><b>${safeName}</b></a>` : `<b>${safeName}</b>`; 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>`; return `<span class="guestbook-entry"><span class="list-meta">${prefix}<span class="muted">${formatDate(e.createdAt)}</span> </span><span>${nameHtml} ${safeMessage}</span></span>`;
}).join('')} /> }).join('')} /></div>
<form id="guestbook-form" class="guestbook-form" style={`margin-left: ${labelWidth + 12}ch`}> <form id="guestbook-form" class="guestbook-form" style={`margin-left: ${labelWidth + 12}ch`}>
<label class="sr-only" for="gb-name">name</label> <label class="sr-only" for="gb-name">name</label>
<input id="gb-name" type="text" name="name" placeholder="name" required maxlength="100" /><br /> <input id="gb-name" type="text" name="name" placeholder="name" required maxlength="100" /><br />

13
www/src/styles/global.css
View file

@ -103,11 +103,17 @@ section pre {
} }
.guestbook-entries { .guestbook-entries {
white-space: pre-wrap; font-family: monospace;
white-space: pre;
} }
.guestbook-entry { .guestbook-entry {
display: block; display: grid;
grid-template-columns: var(--meta-width) 1fr;
}
.guestbook-entry > span:last-child {
white-space: normal;
} }
.guestbook-form { .guestbook-form {
@ -119,8 +125,7 @@ html[data-compact] .list-meta {
display: none; display: none;
} }
html[data-compact] .guestbook-entry { html[data-compact] .guestbook-entry {
padding-left: 0 !important; display: block;
text-indent: 0 !important;
} }
html[data-compact] .guestbook-form { html[data-compact] .guestbook-form {
margin-left: 0 !important; margin-left: 0 !important;