From ff190e982578dfd839623cb955ae54ad457500b7 Mon Sep 17 00:00:00 2001 From: enricobuehler Date: Sat, 1 Aug 2026 00:09:41 +0200 Subject: [PATCH] fix(web): the logs filter row stops touching the card's edge on desktop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Found on glass. The logs card has no CardHeader, so it puts the top padding back itself — but only at one breakpoint. `CardContent` is `p-4 pt-0 sm:p-6 sm:pt-0`, and tailwind-merge resolves conflicts only within the same variant: a bare `pt-6` cancels `pt-0` and leaves `sm:pt-0` standing. Measured on .173: 24px of top padding at 420px wide, 0px at 1280px, with the level filters and the search box sitting flush against the card border. It is the same trap `components/ui/card.tsx` documents for `p-0` — a variant cancelling its unprefixed counterpart and nothing else — just in the other direction, so the note now points both ways. This card was the only offender. Co-Authored-By: Claude Opus 5 (1M context) --- web/src/sections/Logs/LogsCard.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/web/src/sections/Logs/LogsCard.tsx b/web/src/sections/Logs/LogsCard.tsx index 640b6bcd..bce3f6c0 100644 --- a/web/src/sections/Logs/LogsCard.tsx +++ b/web/src/sections/Logs/LogsCard.tsx @@ -213,7 +213,13 @@ export const LogsCard: FC<{ return ( - + {/* This card has no CardHeader, so it has to put the top padding back itself — and it + must do so at BOTH breakpoints. `CardContent` is `p-4 pt-0 sm:p-6 sm:pt-0`, and + tailwind-merge only resolves conflicts within the same variant: a bare `pt-6` cancels + `pt-0` but leaves `sm:pt-0` standing, so the padding was 24px on a phone and 0 on a + desktop, with the filter row touching the card's edge. (Same trap the `p-0` note in + components/ui/card.tsx describes, in the other direction.) */} +
{LEVELS.map((l) => (