From 17db6c99ce70866ef0d15d7c8f0bd6fbd12c598c Mon Sep 17 00:00:00 2001 From: Princess Donut Date: Wed, 12 Aug 2026 14:41:50 +0100 Subject: [PATCH] Scale fixed line heights with text zoom Co-authored-by: Princess Donut Signed-off-by: Princess Donut --- desktop/src/shared/lib/fontSizePreference.test.mjs | 14 ++++++++++++++ desktop/tailwind.config.js | 9 +++++++++ 2 files changed, 23 insertions(+) diff --git a/desktop/src/shared/lib/fontSizePreference.test.mjs b/desktop/src/shared/lib/fontSizePreference.test.mjs index 9f75f5c6e..dae7c3533 100644 --- a/desktop/src/shared/lib/fontSizePreference.test.mjs +++ b/desktop/src/shared/lib/fontSizePreference.test.mjs @@ -1,6 +1,8 @@ import assert from "node:assert/strict"; import test from "node:test"; +import config from "../../../tailwind.config.js"; + const values = new Map(); const attributes = new Map(); const styleValues = new Map(); @@ -25,6 +27,18 @@ globalThis.document = { const preference = await import("./fontSizePreference.ts"); +test("scales fixed line-height utilities with the typography rem", () => { + assert.deepEqual(config.theme.extend.lineHeight, { + 3: "calc(var(--buzz-type-rem) * 0.75)", + 4: "var(--buzz-type-rem)", + 5: "calc(var(--buzz-type-rem) * 1.25)", + 6: "calc(var(--buzz-type-rem) * 1.5)", + 7: "calc(var(--buzz-type-rem) * 1.75)", + 8: "calc(var(--buzz-type-rem) * 2)", + "message-author": "var(--conversation-author-line-height)", + }); +}); + test("defaults invalid and missing font sizes to default", () => { assert.equal(preference.parseFontSize(null), "default"); assert.equal(preference.parseFontSize("medium"), "default"); diff --git a/desktop/tailwind.config.js b/desktop/tailwind.config.js index 5d2c1444f..07d00b0db 100644 --- a/desktop/tailwind.config.js +++ b/desktop/tailwind.config.js @@ -33,6 +33,15 @@ export default { ], }, lineHeight: { + // Keep fixed Tailwind line-height utilities in the typography scale so + // Cmd +/- cannot enlarge glyphs inside an unchanged line box. Single- + // line surfaces keep their existing truncate/overflow behavior. + 3: "calc(var(--buzz-type-rem) * 0.75)", + 4: "var(--buzz-type-rem)", + 5: "calc(var(--buzz-type-rem) * 1.25)", + 6: "calc(var(--buzz-type-rem) * 1.5)", + 7: "calc(var(--buzz-type-rem) * 1.75)", + 8: "calc(var(--buzz-type-rem) * 2)", "message-author": "var(--conversation-author-line-height)", }, boxShadow: {