Skip to content

fix(analysis): fit the column titles on one line, equal columns #364

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ashtonanderson merged 3 commits into from
Nov 7, 2026
Merged

fix(analysis): fit the column titles on one line, equal columns #364

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5ed9cd2
fix(analysis): put the compact column titles on two lines
ashtonanderson Nov 7, 2026
c4674c3
fix(analysis): keep the compact column titles on one line, sized to fit
ashtonanderson Nov 7, 2026
c42073f
fix(analysis): equal columns and one title size for the compact titles
ashtonanderson Nov 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 34 additions & 7 deletions src/components/Analysis/Highlight.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -395,7 +395,12 @@ export const Highlight: React.FC<Props> = ({
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 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
Expand Down Expand Up @@ -424,9 +429,12 @@ export const Highlight: React.FC<Props> = ({
className="flex h-full w-full flex-col border-glass-border bg-transparent"
>
<div
className={`grid grid-cols-2 border-b border-glass-border ${
simplified ? 'grid-cols-1' : ''
}`}
className="grid grid-cols-2 border-b border-glass-border"
style={
useCompactMobileColumnTitles
? { containerType: 'inline-size' }
: undefined
}
>
<div
className={`flex flex-col items-center justify-start border-r border-glass-border ${
Expand All @@ -442,11 +450,14 @@ export const Highlight: React.FC<Props> = ({
>
{isHomePage ? (
<div
className={`text-center text-human-1 ${
className={`whitespace-nowrap text-center text-human-1 ${
useCompactMobileColumnTitles
? compactTitleTextClass
: splitTitleTextClass
}`}
style={
useCompactMobileColumnTitles ? compactTitleStyle : undefined
}
>
{useCompactMobileColumnTitles
? mobileMaiaColumnTitle
Expand All @@ -456,7 +467,8 @@ export const Highlight: React.FC<Props> = ({
<>
{useCompactMobileColumnTitles ? (
<div
className={`flex items-center justify-center pr-4 text-human-1 ${compactTitleTextClass}`}
className={`flex items-center justify-center gap-0.5 text-human-1 ${compactTitleTextClass}`}
style={compactTitleStyle}
>
<select
ref={maiaHeaderSelectRef}
Expand All @@ -478,6 +490,14 @@ export const Highlight: React.FC<Props> = ({
<span className="whitespace-nowrap leading-none">
{mobileMaiaColumnTitle}
</span>
{/* Beside the title rather than at the cell's edge,
where it took the title's room. */}
<span
aria-hidden
className="material-symbols-outlined pointer-events-none !text-[1.15em] leading-none text-human-1/65"
>
expand_more
</span>
</div>
) : (
<select
Expand All @@ -500,7 +520,11 @@ export const Highlight: React.FC<Props> = ({
)}
<button
type="button"
className="material-symbols-outlined absolute right-0.5 top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center text-base leading-none text-human-1/65"
className={`material-symbols-outlined absolute top-1/2 inline-flex -translate-y-1/2 items-center justify-center text-base leading-none text-human-1/65 ${
useCompactMobileColumnTitles
? 'inset-x-0 h-full w-full text-transparent'
: 'right-0.5 h-5 w-5'
}`}
onMouseDown={(e) => {
e.preventDefault()
openMaiaHeaderPicker()
Expand Down Expand Up @@ -624,6 +648,9 @@ export const Highlight: React.FC<Props> = ({
? compactTitleTextClass
: splitTitleTextClass
}`}
style={
useCompactMobileColumnTitles ? compactTitleStyle : undefined
}
>
<span className="leading-none">
{useCompactMobileColumnTitles
Expand Down
Loading