From 045741a676819a96dc5ac588150d6b2a36f84ab4 Mon Sep 17 00:00:00 2001 From: Ronja Date: Wed, 11 Nov 2026 07:25:58 +0100 Subject: [PATCH 1/3] fix(elements): make the result cards and the title more compact on a phone The drawing is to the right of the text below 600 px, the padding and spacing are smaller, and the title of the Elements page is 40 px (was 34 px). The cards are 162 to 182 px high (were 334 to 372 px). Closes #169 --- docs/AI_USAGE.md | 7 ++++ src/components/elements/ResultsTable.tsx | 44 ++++++++++++++---------- src/styles/global.css | 10 ++++++ 3 files changed, 42 insertions(+), 19 deletions(-) diff --git a/docs/AI_USAGE.md b/docs/AI_USAGE.md index 44e324f..b734136 100644 --- a/docs/AI_USAGE.md +++ b/docs/AI_USAGE.md @@ -596,3 +596,10 @@ - **What the team did:** Took the peer feedback that the README (about 59 kB) is too long to find your way in, wrote issue #182, and asked for the reasoning to be kept. - **What Claude did:** Moved four long sections unchanged to their own documents (`ELEMENTS_PAGE.md`, `DATABASE_SETUP.md`, `CATALOG_SEARCH.md`, `E2E_TESTS.md`) with a short summary and a link in the README (now about half the size). Added a "Where is what" table that points from each feature to the file where it starts, and a list of contents at the top of `docs/API.md`. A script checked that every relative link and anchor in the changed files works. - **Limits:** The text of the moved sections was not shortened or checked again, so what was outdated in them is still outdated (that is issue #148). A first run of the move emptied `README.md` because a formatting command was cut off in a pipe; it was restored from git and run again. + +## The result cards and the title on a phone (`src/components/elements/ResultsTable.tsx`, `src/styles/global.css`) + +- **Tool:** Claude Code +- **What the team did:** Took the peer feedback that a result card on a phone takes almost a whole screen and that the title is a little small (issue #169). +- **What Claude did:** Measured the cards first in a real browser at 320, 360 and 390 px in both themes (334 to 372 px high, one card fully on the first screen). Put the drawing to the right of the text below 600 px, shrank the padding and the spacing, and made the title of the Elements page 40 px (was 34 px) with smaller margins. The cards are now 162 to 182 px high, and two are fully on the first screen at 360 and 390 px. +- **Limits:** Measured on one machine with the first page of the results. At 320 px the card is 182 px high and still only one card is fully on the first screen. The two-column cards from 600 px are not changed. diff --git a/src/components/elements/ResultsTable.tsx b/src/components/elements/ResultsTable.tsx index 8ff38d8..25d73f7 100644 --- a/src/components/elements/ResultsTable.tsx +++ b/src/components/elements/ResultsTable.tsx @@ -39,9 +39,9 @@ function ResultCards({ rows }: { rows: ElementListRow[] }) { {rows.map((row) => (
  • -
    +

    {/* The link covers the whole card (the ::after). */}

    -

    {row.description}

    -
    -
    Apparatus:
    -
    {row.apparatusName}
    -
    Element group:
    -
    {groupLabel(row)}
    -
    Difficulty:
    -
    - -
    -
    - {row.hasVariants && ( - - More variants - - )} +

    + {row.description} +

    +
    +
    +
    Apparatus:
    +
    {row.apparatusName}
    +
    Element group:
    +
    {groupLabel(row)}
    +
    Difficulty:
    +
    + +
    +
    + {row.hasVariants && ( + + More variants + + )} +
    {/* The drawing is below the text. If it is missing, nothing is shown, and not a broken image. */} { event.currentTarget.hidden = true }} - className="mt-4 block h-auto max-h-56 w-full rounded-md bg-white object-contain" + className="mt-4 block h-auto max-h-56 w-full rounded-md bg-white object-contain max-[599px]:mt-2 max-[599px]:max-h-24 max-[599px]:self-center" />
    • ))} diff --git a/src/styles/global.css b/src/styles/global.css index d49730c..d1781a7 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -86,6 +86,16 @@ font-weight: 800; } +/* On a phone the title is larger (peer feedback: it was a little small) and its + margins are tighter, so the larger title does not push the results down. */ +@media (max-width: 599px) { + #root .elements-page h1 { + font-size: 2.5rem; + line-height: 1.1; + margin: 0.5rem 0 0.75rem; + } +} + #root .elements-page h2 { font-size: 1.25rem; margin-bottom: 0.75rem; From 5135e3922e647c60e63fa3044b4119f39e2c18e3 Mon Sep 17 00:00:00 2001 From: Ronja Date: Wed, 11 Nov 2026 18:58:24 +0100 Subject: [PATCH 2/3] fix(elements): show a larger drawing under the text and the fields in a row on a phone The drawing was 96 px wide and could not be understood. It is now under the text, at most 112 px high, and the apparatus, the element group and the difficulty are in a row that wraps below 600 px. Refs #169 --- docs/AI_USAGE.md | 4 +-- src/components/elements/ResultsTable.tsx | 36 ++++++++++++++---------- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/docs/AI_USAGE.md b/docs/AI_USAGE.md index b734136..8f1d15c 100644 --- a/docs/AI_USAGE.md +++ b/docs/AI_USAGE.md @@ -601,5 +601,5 @@ - **Tool:** Claude Code - **What the team did:** Took the peer feedback that a result card on a phone takes almost a whole screen and that the title is a little small (issue #169). -- **What Claude did:** Measured the cards first in a real browser at 320, 360 and 390 px in both themes (334 to 372 px high, one card fully on the first screen). Put the drawing to the right of the text below 600 px, shrank the padding and the spacing, and made the title of the Elements page 40 px (was 34 px) with smaller margins. The cards are now 162 to 182 px high, and two are fully on the first screen at 360 and 390 px. -- **Limits:** Measured on one machine with the first page of the results. At 320 px the card is 182 px high and still only one card is fully on the first screen. The two-column cards from 600 px are not changed. +- **What Claude did:** Measured the cards first in a real browser at 320, 360 and 390 px in both themes (334 to 372 px high, one card fully on the first screen). Tried a small drawing next to the text (the cards were 162 to 182 px, but the drawing was 96 px wide and could not be understood), and a switch "Show drawings" (not kept, the team did not want one more control). Kept the drawing under the text, at most 112 px high (it was up to 224 px), and put the apparatus, the element group and the difficulty in a row that wraps below 600 px. The title of the Elements page is 40 px (was 34 px) with smaller margins. +- **Limits:** Measured on one machine with the first page of the results. The cards are about 258 px high at 360 and 390 px and 282 px at 320 px (before: 334 to 372 px), so about one card fully on the first screen and not twice as many results as the issue asked for. The two-column cards from 600 px are not changed. diff --git a/src/components/elements/ResultsTable.tsx b/src/components/elements/ResultsTable.tsx index 25d73f7..cfea747 100644 --- a/src/components/elements/ResultsTable.tsx +++ b/src/components/elements/ResultsTable.tsx @@ -39,9 +39,9 @@ function ResultCards({ rows }: { rows: ElementListRow[] }) { {rows.map((row) => (
  • -
    +

    {/* The link covers the whole card (the ::after). */}

    -

    +

    {row.description}

    -
    -
    + {/* Below 600 px the three pairs are in a row that wraps, to save height. From + 600 px they are a table of two columns (each pair is then "contents"). */} +
    +
    Apparatus:
    {row.apparatusName}
    +
    +
    Element group:
    {groupLabel(row)}
    +
    +
    Difficulty:
    -
    - {row.hasVariants && ( - - More variants - - )} -
    +
    + + {row.hasVariants && ( + + More variants + + )} {/* The drawing is below the text. If it is missing, nothing is shown, and not a broken image. */} { event.currentTarget.hidden = true }} - className="mt-4 block h-auto max-h-56 w-full rounded-md bg-white object-contain max-[599px]:mt-2 max-[599px]:max-h-24 max-[599px]:self-center" + className="mt-4 block h-auto max-h-56 w-full rounded-md bg-white object-contain max-[599px]:mt-2 max-[599px]:max-h-28" />
    • ))} From 3129355a2cc86fbc9bcd26f2efd208c98c170d24 Mon Sep 17 00:00:00 2001 From: Ronja Date: Wed, 11 Nov 2026 19:18:32 +0100 Subject: [PATCH 3/3] docs(ai): describe the changes asked for after the first version of the compact cards Refs #169 --- docs/AI_USAGE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/AI_USAGE.md b/docs/AI_USAGE.md index 8f1d15c..f5ee175 100644 --- a/docs/AI_USAGE.md +++ b/docs/AI_USAGE.md @@ -601,5 +601,5 @@ - **Tool:** Claude Code - **What the team did:** Took the peer feedback that a result card on a phone takes almost a whole screen and that the title is a little small (issue #169). -- **What Claude did:** Measured the cards first in a real browser at 320, 360 and 390 px in both themes (334 to 372 px high, one card fully on the first screen). Tried a small drawing next to the text (the cards were 162 to 182 px, but the drawing was 96 px wide and could not be understood), and a switch "Show drawings" (not kept, the team did not want one more control). Kept the drawing under the text, at most 112 px high (it was up to 224 px), and put the apparatus, the element group and the difficulty in a row that wraps below 600 px. The title of the Elements page is 40 px (was 34 px) with smaller margins. +- **What Claude did:** Measured the cards first in a real browser at 320, 360 and 390 px in both themes (334 to 372 px high, one card fully on the first screen). After the first version Ronja looked at the cards in the browser and asked for a fix for each thing that was not logical (the drawing was too small to understand, the spacing of the fields); the changes were tried one by one and those she did not want were undone. Tried a small drawing next to the text (the cards were 162 to 182 px, but the drawing was 96 px wide and could not be understood), and a switch "Show drawings" (not kept, the team did not want one more control). Kept the drawing under the text, at most 112 px high (it was up to 224 px), and put the apparatus, the element group and the difficulty in a row that wraps below 600 px. The title of the Elements page is 40 px (was 34 px) with smaller margins. - **Limits:** Measured on one machine with the first page of the results. The cards are about 258 px high at 360 and 390 px and 282 px at 320 px (before: 334 to 372 px), so about one card fully on the first screen and not twice as many results as the issue asked for. The two-column cards from 600 px are not changed.