Skip to content

fix(web): Keep the results list readable below 1024px #30

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
OffCrazyFreak merged 1 commit into from
Sep 16, 2026
Merged

fix(web): Keep the results list readable below 1024px #30

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
26 changes: 13 additions & 13 deletions web/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -405,8 +405,8 @@ function Header({
)}
</AnimatePresence>
</div>
<nav className="bp-mono flex gap-4 text-[11px] tracking-wider uppercase sm:gap-6 md:text-xs">
<a className="bp-link" href="#how-it-decides">
<nav className="bp-mono flex gap-4 text-[11px] tracking-wider whitespace-nowrap uppercase sm:gap-6 md:text-xs">
<a className="bp-link hidden sm:inline" href="#how-it-decides">
How it decides
</a>
<a className="bp-link" href="https://github.com/OffCrazyFreak/eBook-Metamend">
Expand Down Expand Up @@ -850,7 +850,7 @@ function Summary({
const [hover, setHover] = useState<number | null>(null)
return (
<section className="mt-10" aria-live="polite">
<div className="grid gap-6 md:grid-cols-[1fr_auto] md:items-end">
<div className="grid gap-6 lg:grid-cols-[1fr_auto] lg:items-end">
<div>
<span className="bp-dim w-fit min-w-64">{stage(phase, counts, sample)}</span>
<p className="bp-display mt-4 text-3xl md:text-4xl">
Expand Down Expand Up @@ -977,7 +977,7 @@ function Results({
const picked = checked.filter((b) => isSelected(selection, b)).length
return (
<ol className="bp-panel mt-6 px-4 pt-3 [--row-inset:1rem] md:px-6 md:[--row-inset:1.5rem]">
<li className="bp-mono grid grid-cols-[1.25rem_2.5rem_1fr_auto] items-center gap-4 pb-3 text-xs tracking-wider text-[var(--bp-muted)] uppercase md:grid-cols-[1.25rem_2.5rem_1fr_10rem_7rem_8rem]">
<li className="bp-mono grid grid-cols-[1.25rem_2.5rem_1fr_auto] items-center gap-4 pb-3 text-xs tracking-wider text-[var(--bp-muted)] uppercase lg:grid-cols-[1.25rem_2.5rem_1fr_10rem_7rem_8rem]">
<Tick
label="Select every checked book"
checked={checked.length > 0 && picked === checked.length}
Expand All @@ -987,12 +987,12 @@ function Results({
/>
<span>no.</span>
<span>file</span>
<span className="hidden md:block">sources</span>
<span className="hidden md:block">gains</span>
<span className="hidden lg:block">sources</span>
<span className="hidden lg:block">gains</span>
<span className="flex items-center justify-end gap-3">
<button
type="button"
className="bp-link hidden normal-case md:inline"
className="bp-link hidden normal-case lg:inline"
onClick={() => onLegend()}
aria-label="Keyboard shortcuts"
>
Expand Down Expand Up @@ -1032,14 +1032,14 @@ function Results({
disabled={!done}
onClick={() => onSelect(book)}
style={origin === book.stem ? { viewTransitionName: 'detail' } : undefined}
className="bp-row-button grid w-full grid-cols-[2.5rem_1fr_auto] items-center gap-4 py-3 text-left focus-visible:outline-none disabled:cursor-default md:grid-cols-[2.5rem_1fr_10rem_7rem_8rem]"
className="bp-row-button grid w-full grid-cols-[2.5rem_1fr_auto] items-center gap-4 py-3 text-left focus-visible:outline-none disabled:cursor-default lg:grid-cols-[2.5rem_1fr_10rem_7rem_8rem]"
>
<span className="bp-mono text-xs text-[var(--bp-muted)]">
{String(i + 1).padStart(2, '0')}
</span>
<span className="min-w-0">
<span className="bp-row-title block truncate">{book.facts.title}</span>
<span className="block truncate text-sm text-[var(--bp-muted)]">
<span className="bp-row-title line-clamp-2">{book.facts.title}</span>
<span className="line-clamp-2 text-sm text-[var(--bp-muted)]">
{book.facts.author}
{book.facts.series && ` · ${book.facts.series} ${book.facts.series_index}`}
<span className="bp-mono">
Expand All @@ -1048,12 +1048,12 @@ function Results({
</span>
</span>
{done && book.proposal && (
<span className="bp-mono block truncate text-xs text-[var(--bp-muted)] md:hidden">
<span className="bp-mono line-clamp-2 text-xs text-[var(--bp-muted)] lg:hidden">
<Gains book={book} outcome={outcome.get(book.stem)} prefix="gains: " />
</span>
)}
</span>
<span className="bp-mono hidden text-xs text-[var(--bp-muted)] md:block">
<span className="bp-mono hidden text-xs text-[var(--bp-muted)] lg:block">
{(done ? (book.proposal?.sources ?? []) : (book.answered ?? [])).map(
(s, n, all) => (
<motion.span
Expand All @@ -1071,7 +1071,7 @@ function Results({
),
)}
</span>
<span className="bp-mono hidden text-xs text-[var(--bp-muted)] md:block">
<span className="bp-mono hidden text-xs text-[var(--bp-muted)] lg:block">
{done && book.proposal && (
<Gains book={book} outcome={outcome.get(book.stem)} />
)}
Expand Down
Loading