diff --git a/Cargo.lock b/Cargo.lock index 30fbfc8..2ce0fb5 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2581,7 +2581,7 @@ dependencies = [ [[package]] name = "rustpad" -version = "0.2.1" +version = "0.2.3" dependencies = [ "argon2", "aws-config", diff --git a/Cargo.toml b/Cargo.toml index 12e9c0f..564591b 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "rustpad" -version = "0.2.2" +version = "0.2.3" edition = "2024" rust-version = "1.94" description = "Collaborative Markdown notepad built with Axum, WebSockets and SQLite, PostgreSQL and MySQL" diff --git a/static/css/styles.css b/static/css/styles.css index 0f0571a..337820c 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1410,15 +1410,17 @@ dialog::backdrop { .owner-label { position: absolute; - right: 8px; - max-width: min(180px, 45%); + right: calc(var(--editor-rendered-font-size, 14px) * .57); + box-sizing: border-box; + max-width: min(calc(var(--editor-rendered-font-size, 14px) * 12.8571), 45%); + max-height: calc(var(--editor-line-height, 29px) - 2px); overflow: hidden; - padding: 2px 7px; + padding: .14em .5em; border: 1px solid color-mix(in srgb, var(--owner) 62%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--owner) 18%, #0d1015); color: #eef1f5; - font: 600 10px/1.25 system-ui, sans-serif; + font: 600 calc(var(--editor-rendered-font-size, 14px) * .7143)/1.25 system-ui, sans-serif; opacity: .82; text-overflow: ellipsis; white-space: nowrap; @@ -4075,10 +4077,10 @@ dialog::backdrop { /* Multiple authors can contribute to one line. */ .owner-label-group { position: absolute; - right: 8px; + right: calc(var(--editor-rendered-font-size, 14px) * .57); display: flex; - max-width: min(420px, 70%); - gap: 4px; + max-width: min(calc(var(--editor-rendered-font-size, 14px) * 30), 70%); + gap: calc(var(--editor-rendered-font-size, 14px) * .2857); overflow: hidden; transform: translateY(-50%); white-space: nowrap; @@ -4089,7 +4091,7 @@ dialog::backdrop { right: auto; flex: 0 1 auto; min-width: 0; - max-width: 150px; + max-width: calc(var(--editor-rendered-font-size, 14px) * 10.7143); transform: none; } diff --git a/static/js/note-editor.js b/static/js/note-editor.js index ca70c6b..5579568 100644 --- a/static/js/note-editor.js +++ b/static/js/note-editor.js @@ -143,16 +143,17 @@ export function startNoteEditor(adapter) { renderParticipantBadges(authorshipColorsEnabled ? owners : []); document.querySelectorAll("[data-authorship-mode]").forEach(button => button.classList.toggle("active", button.dataset.authorshipMode === authorshipMode)); editorWorkspace.dataset.authorshipMode = authorshipMode; - const style = getComputedStyle(editor), lineHeight = parseFloat(style.lineHeight) || 29, paddingTop = parseFloat(style.paddingTop) || 24, paddingBottom = parseFloat(style.paddingBottom) || 24; + const style = getComputedStyle(editor), lineHeight = parseFloat(style.lineHeight) || 29, fontSize = parseFloat(style.fontSize) || 14, paddingTop = parseFloat(style.paddingTop) || 24, paddingBottom = parseFloat(style.paddingBottom) || 24; gutter.style.paddingTop = `${paddingTop}px`; gutter.style.paddingBottom = `${paddingBottom}px`; gutter.style.lineHeight = `${lineHeight}px`; gutter.innerHTML = lines.map((_, i) => `
`).join(""); ownerLabels.style.setProperty("--editor-line-height", `${lineHeight}px`); + ownerLabels.style.setProperty("--editor-rendered-font-size", `${fontSize}px`); if (full) { let previousAuthorSignature = null; ownerLabels.innerHTML = lines.map((_, i) => { const authors = authorsByLine[i] || []; if (!authors.length) return ""; - const top = paddingTop + i * lineHeight; + const top = paddingTop + i * lineHeight + lineHeight / 2; const signature = authors.map(owner => ownerName(owner)).sort((a, b) => a.localeCompare(b)).join("\u0000"); if (signature === previousAuthorSignature) return ""; previousAuthorSignature = signature;