From 5ed9cd25295bea5017f1df7cb2a82f38adbab3b5 Mon Sep 17 00:00:00 2001 From: ashtonanderson Date: Sat, 7 Nov 2026 09:05:38 +0000 Subject: [PATCH 1/3] fix(analysis): put the compact column titles on two lines On phones and in the desktop analysis panel, each column's title was one line: "Maia-3 1600: Human Moves" no longer fit in its column (about 195px) once the name became Maia-3, and ran into "SF 19: Engine Moves" beside it. Each title is now the model ("Maia-3 1600", "SF 19 d20") over a smaller "Human Moves" / "Engine Moves", which fits at any width. The wider split layout and the home page's panel are unchanged. Co-Authored-By: Claude Opus 5.5 --- src/components/Analysis/Highlight.tsx | 44 ++++++++++++++++----------- 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/src/components/Analysis/Highlight.tsx b/src/components/Analysis/Highlight.tsx index 8896f9a1..e7dce545 100644 --- a/src/components/Analysis/Highlight.tsx +++ b/src/components/Analysis/Highlight.tsx @@ -391,8 +391,11 @@ export const Highlight: React.FC = ({ const useCompactMobileColumnTitles = isMobile || simplified const maiaRating = currentMaiaModel.replace('maia_kdd_', '') - const mobileMaiaColumnTitle = `Maia-3 ${maiaRating}: Human Moves` - const mobileStockfishColumnTitle = 'SF 19: Engine Moves' + // Compact titles (phones, and the desktop side panel) are two lines, the + // model over what the column lists: on one line, "Maia-3 1600: Human + // Moves" was wider than its column and ran into the Stockfish title. + const compactSubtitleClass = + 'mt-1 block text-[11px] font-medium leading-none opacity-75' const compactTitleRowClass = 'grid h-11 place-items-center' const splitTitleRowClass = 'grid h-12 place-items-center' const compactTitleTextClass = 'text-sm font-semibold leading-none' @@ -448,9 +451,10 @@ export const Highlight: React.FC = ({ : splitTitleTextClass }`} > - {useCompactMobileColumnTitles - ? mobileMaiaColumnTitle - : `Maia-3 ${maiaRating}`} + {`Maia-3 ${maiaRating}`} + {useCompactMobileColumnTitles && ( + Human Moves + )} ) : ( <> @@ -475,8 +479,9 @@ export const Highlight: React.FC = ({ ))} - - {mobileMaiaColumnTitle} + + {`Maia-3 ${maiaRating}`} + Human Moves ) : ( @@ -618,24 +623,27 @@ export const Highlight: React.FC = ({ : splitTitleRowClass }`} > -

- - {useCompactMobileColumnTitles - ? mobileStockfishColumnTitle - : 'Stockfish 19'} - - {stockfishDepthLabel && ( - - {stockfishDepthLabel} +

+ + {useCompactMobileColumnTitles ? 'SF 19' : 'Stockfish 19'} + {stockfishDepthLabel && ( + + {stockfishDepthLabel} + + )} +

+ {useCompactMobileColumnTitles && ( + Engine Moves )} -

+ {!hideStockfishEvalSummary && ( From c4674c3c9e1d5584ce161c81deba1042a25d96da Mon Sep 17 00:00:00 2001 From: ashtonanderson Date: Sat, 7 Nov 2026 09:13:45 +0000 Subject: [PATCH 2/3] fix(analysis): keep the compact column titles on one line, sized to fit Back to one line, as before the previous commit, but fitting: in panels from 360px wide (a 360px phone, or a 1280px desktop window), "Maia-3 1600: Human Moves" was 235px wide in a 180-215px column and ran into "SF 19: Engine Moves". - The titles' size follows the panel's width (cqi, 1% of it): 11px at 360px wide, 12px at 1440 desktop, up to 14px. - The Maia column, whose title is longer, gets 56% of the width. - The model menu's arrow sits right after the title instead of at the cell's edge; the whole title cell opens the menu. Co-Authored-By: Claude Opus 5.5 --- src/components/Analysis/Highlight.tsx | 87 +++++++++++++++++---------- 1 file changed, 55 insertions(+), 32 deletions(-) diff --git a/src/components/Analysis/Highlight.tsx b/src/components/Analysis/Highlight.tsx index e7dce545..d4d34d9b 100644 --- a/src/components/Analysis/Highlight.tsx +++ b/src/components/Analysis/Highlight.tsx @@ -391,14 +391,16 @@ export const Highlight: React.FC = ({ const useCompactMobileColumnTitles = isMobile || simplified const maiaRating = currentMaiaModel.replace('maia_kdd_', '') - // Compact titles (phones, and the desktop side panel) are two lines, the - // model over what the column lists: on one line, "Maia-3 1600: Human - // Moves" was wider than its column and ran into the Stockfish title. - const compactSubtitleClass = - 'mt-1 block text-[11px] font-medium leading-none opacity-75' + const mobileMaiaColumnTitle = `Maia-3 ${maiaRating}: Human Moves` + const mobileStockfishColumnTitle = 'SF 19: Engine Moves' const compactTitleRowClass = 'grid h-11 place-items-center' const splitTitleRowClass = 'grid h-12 place-items-center' - const compactTitleTextClass = 'text-sm font-semibold leading-none' + const compactTitleTextClass = 'font-semibold leading-none' + // Compact titles are one line, "Maia-3 1600: Human Moves" beside "SF 19: + // Engine Moves", in a panel as narrow as 360px. Their size follows the + // panel's width (cqi: 1% of it), 14px down to 11px, and the Maia column, + // whose title is longer, gets 56% of it. + const compactTitleStyle = { fontSize: 'clamp(11px, 3.1cqi, 14px)' } const splitTitleTextClass = 'text-sm font-semibold leading-none md:text-xxs lg:text-xs' const stockfishDepth = moveEvaluation?.stockfish?.depth @@ -427,9 +429,16 @@ export const Highlight: React.FC = ({ className="flex h-full w-full flex-col border-glass-border bg-transparent" >
= ({ > {isHomePage ? (
- {`Maia-3 ${maiaRating}`} - {useCompactMobileColumnTitles && ( - Human Moves - )} + {useCompactMobileColumnTitles + ? mobileMaiaColumnTitle + : `Maia-3 ${maiaRating}`}
) : ( <> {useCompactMobileColumnTitles ? (
- - {`Maia-3 ${maiaRating}`} - Human Moves + + {mobileMaiaColumnTitle} + + {/* Beside the title rather than at the cell's edge, + where it took the title's room. */} + + expand_more
) : ( @@ -505,7 +524,11 @@ export const Highlight: React.FC = ({ )}
{!hideStockfishEvalSummary && ( From c42073f89ebab593fdf552c4e7e3fffb5593de75 Mon Sep 17 00:00:00 2001 From: ashtonanderson Date: Sat, 7 Nov 2026 18:35:16 +0000 Subject: [PATCH 3/3] fix(analysis): equal columns and one title size for the compact titles Co-Authored-By: Claude Opus 5.5 --- src/components/Analysis/Highlight.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/Analysis/Highlight.tsx b/src/components/Analysis/Highlight.tsx index d4d34d9b..613b5896 100644 --- a/src/components/Analysis/Highlight.tsx +++ b/src/components/Analysis/Highlight.tsx @@ -397,10 +397,10 @@ export const Highlight: React.FC = ({ const splitTitleRowClass = 'grid h-12 place-items-center' const compactTitleTextClass = 'font-semibold leading-none' // Compact titles are one line, "Maia-3 1600: Human Moves" beside "SF 19: - // Engine Moves", in a panel as narrow as 360px. Their size follows the - // panel's width (cqi: 1% of it), 14px down to 11px, and the Maia column, - // whose title is longer, gets 56% of it. - const compactTitleStyle = { fontSize: 'clamp(11px, 3.1cqi, 14px)' } + // Engine Moves", in two equal columns of a panel as narrow as 360px. Both + // are one size, which follows the panel's width (cqi: 1% of it) so that + // the longer Maia title fits its half, up to 14px. + const compactTitleStyle = { fontSize: 'min(2.85cqi, 14px)' } const splitTitleTextClass = 'text-sm font-semibold leading-none md:text-xxs lg:text-xs' const stockfishDepth = moveEvaluation?.stockfish?.depth @@ -429,11 +429,7 @@ export const Highlight: React.FC = ({ className="flex h-full w-full flex-col border-glass-border bg-transparent" >