From 9fd509974e1e484041f2a40a6645263cd6449a54 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 7 May 2026 16:50:05 +0000 Subject: [PATCH] fix(potd): remove letterbox strips around plot of the day image MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The 16:10 plot frame in PlotOfTheDayTerminal used `--bg-elevated` as its background, with a hover swap to `--bg-page`. Because the image inside is `object-fit: contain`, non-16:10 plots were letterboxed and those strips above and below the plot picked up the elevated colour — and changed colour on hover, which read as unrelated to the plot. Match the frame background to the surrounding card (`--bg-surface`) and drop the hover colour change. The dashed top/bottom rules remain as the visual separators. --- app/src/components/PlotOfTheDayTerminal.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/src/components/PlotOfTheDayTerminal.tsx b/app/src/components/PlotOfTheDayTerminal.tsx index ae95571574..837b6d4f6e 100644 --- a/app/src/components/PlotOfTheDayTerminal.tsx +++ b/app/src/components/PlotOfTheDayTerminal.tsx @@ -144,13 +144,11 @@ export function PlotOfTheDayTerminal({ maxHeight: maxPlotHeight, borderTop: '1px dashed var(--rule)', borderBottom: '1px dashed var(--rule)', - bgcolor: 'var(--bg-elevated)', + bgcolor: 'var(--bg-surface)', aspectRatio: '16 / 10', position: 'relative', overflow: 'hidden', cursor: 'pointer', - transition: 'background 0.2s', - '&:hover': { bgcolor: 'var(--bg-page)' }, '&:focus-visible': { outline: `2px solid ${colors.primary}`, outlineOffset: -2 }, }} >