From cd7768eab066ba13ef3a4a6d98992c7c6efa87d3 Mon Sep 17 00:00:00 2001
From: xue <behicsakar@gmail.com>
Date: Wed, 23 Sep 2026 15:15:53 -0400
Subject: [PATCH] Most-common-words pages: search rows line up, words set like
 words

- /tools/most-common-words search: each result row was its own grid sized
  to its content, so the language column started wherever that row's word
  ended (12 of 53 rows off, by up to 54px). The columns are fixed widths
  now; a long word wraps in its own column.
- Language lists: the word is set in Nunito 800 at 1.125rem instead of
  body-size 600. A word in Malayalam or Arabic was the faintest thing in
  its row.
- The selected "Top N" chip is blue on the accent tint, per DESIGN.md's
  selected-is-blue rule; it was an ink outline.
- Page copy moves from text-tertiary to text-quiet (table header, ranks,
  count, credit, placeholder): tertiary is the phone replicas' grey.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../tools/most-common-words/+page.svelte      | 10 +++++--
 .../most-common-words/[language]/+page.svelte | 30 +++++++++++++------
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/routes/(site)/tools/most-common-words/+page.svelte b/src/routes/(site)/tools/most-common-words/+page.svelte
index e4e69b7c..a4487f91 100644
--- a/src/routes/(site)/tools/most-common-words/+page.svelte
+++ b/src/routes/(site)/tools/most-common-words/+page.svelte
@@ -597,10 +597,14 @@
 		}
 	}
 
+	// Every row is its own grid, so the columns are fixed widths: sized to
+	// their content, each row lined its language up wherever its own word
+	// ended. 11rem holds the longest word with its IPA; longer ones wrap in
+	// place. 7rem holds "Vietnamese", the longest language name.
 	.group li {
 		position: relative;
 		display: grid;
-		grid-template-columns: auto minmax(6rem, auto) minmax(5rem, auto) 1fr auto;
+		grid-template-columns: auto 11rem 7rem 1fr auto;
 		align-items: center;
 		gap: var(--space-sm);
 		padding: 12px 0;
@@ -609,6 +613,8 @@
 		.term {
 			display: inline-flex;
 			flex-wrap: wrap;
+			min-width: 0;
+			overflow-wrap: anywhere;
 			align-items: center;
 			gap: 0 6px;
 			font-family: var(--font--title);
@@ -638,7 +644,7 @@
 		}
 
 		.rank {
-			color: var(--color--text-tertiary);
+			color: var(--color--text-quiet);
 			font-size: 0.8125rem;
 		}
 
diff --git a/src/routes/(site)/tools/most-common-words/[language]/+page.svelte b/src/routes/(site)/tools/most-common-words/[language]/+page.svelte
index ccdf2725..de919d20 100644
--- a/src/routes/(site)/tools/most-common-words/[language]/+page.svelte
+++ b/src/routes/(site)/tools/most-common-words/[language]/+page.svelte
@@ -396,8 +396,8 @@
 			<a href="https://github.com/espeak-ng/espeak-ng" rel="noopener noreferrer" target="_blank"
 				>eSpeak NG</a
 			>
-			filling in pronunciations Wiktionary lacks. The data is CC BY-SA 4.0, and so is this list —
-			keep the credit if you pass it on. Example sentences come from
+			filling in pronunciations Wiktionary lacks. The data is CC BY-SA 4.0, and so is this list — keep
+			the credit if you pass it on. Example sentences come from
 			<a href="https://tatoeba.org" rel="noopener noreferrer" target="_blank">Tatoeba</a>, CC BY 2.0
 			FR. The
 			<a href={fileUrl} download>raw data file</a> is here too.
@@ -477,9 +477,12 @@
 		transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease,
 			transform var(--dur-press) var(--ease-out);
 
+		// The slice being shown. Selected is blue (DESIGN.md: if it is tapped,
+		// focused or selected, it is blue), in the app's tint rather than ink.
 		&.on {
-			color: var(--color--text);
-			border-color: var(--color--text);
+			color: var(--color--accent);
+			background: var(--color--accent-tint);
+			border-color: transparent;
 		}
 
 		&:active {
@@ -505,7 +508,7 @@
 		font-size: 0.9375rem;
 
 		&::placeholder {
-			color: var(--color--text-tertiary);
+			color: var(--color--text-quiet);
 		}
 	}
 
@@ -536,19 +539,28 @@
 			font-size: 0.75rem;
 			text-transform: uppercase;
 			letter-spacing: 0.06em;
-			color: var(--color--text-tertiary);
+			color: var(--color--text-quiet);
 			font-weight: 600;
 		}
 
 		.rank {
 			width: 4.5rem;
-			color: var(--color--text-tertiary);
+			color: var(--color--text-quiet);
 			font-variant-numeric: tabular-nums;
 		}
 
 		.word {
 			width: 38%;
 			font-weight: 600;
+
+			// The word is what the page is for, so it is set like a name: in
+			// Nunito 800, a step up from the text. At 600 and body size a word
+			// in Malayalam or Arabic was the faintest thing in its row.
+			> span:first-child {
+				font-family: var(--font--title);
+				font-weight: 800;
+				font-size: 1.125rem;
+			}
 		}
 
 		.gloss {
@@ -652,7 +664,7 @@
 	}
 
 	.count {
-		color: var(--color--text-tertiary);
+		color: var(--color--text-quiet);
 		font-size: 0.8125rem;
 	}
 
@@ -739,7 +751,7 @@
 
 	.credit {
 		font-size: 0.8125rem;
-		color: var(--color--text-tertiary);
+		color: var(--color--text-quiet);
 		margin-top: var(--space-sm);
 	}