From ab53a8759be658a3b2a1f3ac768c6275016fc46d Mon Sep 17 00:00:00 2001 From: eti Date: Fri, 31 Jul 2026 12:35:00 +0200 Subject: [PATCH] web/settings: draw the settings list hairlines with divide-y MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit the three gap variants each repeated their own border-t and border colour on an [&>*+*] selector; divide-y divide-border-default says it once in the base, so a variant only has to carry spacing. the spacing had to move with it. divide-y draws on the bottom of every row but the last, where the old rule drew on the top of every row but the first, and the rows carry min-h-8 — being border-box, that swallowed the old border and top padding whole, so the hairline actually sat 12px under one row and 8px over the next with an uneven 45/41px text pitch. giving each row half the gap as its own padding, and leaving the card the rest of its 12px, puts the line where the comment always claimed it was: 8/8 with an even 41px pitch. cards come out 8-11px shorter for it. Signed-off-by: eti --- .../components/settings/SettingsList.svelte | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/web/src/lib/components/settings/SettingsList.svelte b/web/src/lib/components/settings/SettingsList.svelte index 6f72428e..0e0e5977 100644 --- a/web/src/lib/components/settings/SettingsList.svelte +++ b/web/src/lib/components/settings/SettingsList.svelte @@ -2,20 +2,23 @@ import { tv, type VariantProps } from "tailwind-variants"; export const settingsList = tv({ - base: "flex w-full flex-col rounded-sm border border-border-default", + base: "flex w-full flex-col divide-y divide-border-default rounded-sm border border-border-default", variants: { // Figma spaces rows with a gap and drops the hairline in the middle of it, - // so the divider is split evenly across the two rows it separates rather - // than sitting flush against one of them. Named in Tailwind spacing units - // because the designs use all three of 8 / 12 / 16px. + // so each row carries half the gap as its own padding and divide-y draws the + // line between the two halves — that way the divider is split evenly across + // the rows it separates rather than sitting flush against one of them. The + // card's own vertical padding is whatever is left of 12px once a row's half + // is counted, which is why it lives here rather than in `padding`. Named in + // Tailwind spacing units because the designs use all three of 8 / 12 / 16px. gap: { - "2": "[&>*+*]:mt-1 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-1", - "3": "[&>*+*]:mt-1.5 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-1.5", - "4": "[&>*+*]:mt-2 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-2" + "2": "py-2 [&>*]:py-1", + "3": "py-1.5 [&>*]:py-1.5", + "4": "py-1 [&>*]:py-2" }, padding: { - default: "px-4 py-3", - tight: "p-3" + default: "px-4", + tight: "px-3" } }, defaultVariants: { -- 2.51.2