From 8cf0263d902bdae65226fe208ab3bd234c652b51 Mon Sep 17 00:00:00 2001
From: Basu Jindal <42815171+basujindal@users.noreply.github.com>
Date: Wed, 3 Jun 2026 18:42:00 -0700
Subject: [PATCH 1/3] Make Japanese mobile tabs more readable
---
css/japanese.css | 34 +++++++++++++++++++++++++++++++---
1 file changed, 31 insertions(+), 3 deletions(-)
diff --git a/css/japanese.css b/css/japanese.css
index 0a14b8fc..d611b7e2 100644
--- a/css/japanese.css
+++ b/css/japanese.css
@@ -404,19 +404,47 @@ body.hide-romaji #panelWords .jp-word-quiz-romaji { display: none; }
.jp-match-grid { grid-template-columns: repeat(3, 1fr); }
.jp-modal-glyph { font-size: 7rem; }
.jp-study-actions { grid-template-columns: repeat(2, 1fr); }
- .jp-modes { grid-template-columns: repeat(5, 1fr); gap: 0.3rem; margin-bottom: 1rem; }
- .jp-mode { padding: 0.6rem 0.25rem; gap: 0.25rem; }
+ .jp-modes {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 0.5rem;
+ margin-bottom: 1rem;
+ }
+ .jp-mode {
+ min-width: 0;
+ min-height: 58px;
+ padding: 0.65rem 0.4rem;
+ gap: 0.3rem;
+ box-sizing: border-box;
+ }
.jp-mode:hover { transform: none; }
.jp-mode-icon { font-size: 1.2rem; margin-bottom: 0; }
.jp-mode-icon svg { width: 1.2rem; height: 1.2rem; stroke-width: 2; }
- .jp-mode-name { font-size: 0.75rem; line-height: 1.1; }
+ .jp-mode-name {
+ font-size: 0.88rem;
+ line-height: 1.15;
+ }
.jp-mode-sub { display: none; }
.jp-word-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.jp-word-quiz-question { font-size: 2.5rem; }
}
@media (max-width: 480px) {
+ .jp-page { padding-left: 1rem; padding-right: 1rem; }
+ .jp-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
+ .jp-mode {
+ flex-direction: row;
+ justify-content: center;
+ min-height: 52px;
+ padding: 0.65rem 0.55rem;
+ }
+ .jp-mode:last-child { grid-column: 1 / -1; }
+ .jp-mode-name { font-size: 0.95rem; }
.jp-filters { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.jp-filter-group { width: 100%; flex-direction: column; align-items: flex-start; }
.jp-pills { width: 100%; }
.jp-pill { flex: 1; }
}
+
+@media (max-width: 340px) {
+ .jp-modes { grid-template-columns: 1fr; }
+ .jp-mode:last-child { grid-column: auto; }
+}
From 1eaec82384531a63eba333995a87ce45993e5aaa Mon Sep 17 00:00:00 2001
From: Basu Jindal <42815171+basujindal@users.noreply.github.com>
Date: Wed, 3 Jun 2026 18:48:06 -0700
Subject: [PATCH 2/3] Reduce Japanese tab PR conflicts
---
css/japanese.css | 49 ++++++++++++++++++++++++++++++------------------
1 file changed, 31 insertions(+), 18 deletions(-)
diff --git a/css/japanese.css b/css/japanese.css
index d611b7e2..350bcb8a 100644
--- a/css/japanese.css
+++ b/css/japanese.css
@@ -404,44 +404,57 @@ body.hide-romaji #panelWords .jp-word-quiz-romaji { display: none; }
.jp-match-grid { grid-template-columns: repeat(3, 1fr); }
.jp-modal-glyph { font-size: 7rem; }
.jp-study-actions { grid-template-columns: repeat(2, 1fr); }
+ .jp-modes { grid-template-columns: repeat(5, 1fr); gap: 0.3rem; margin-bottom: 1rem; }
+ .jp-mode { padding: 0.6rem 0.25rem; gap: 0.25rem; }
+ .jp-mode:hover { transform: none; }
+ .jp-mode-icon { font-size: 1.2rem; margin-bottom: 0; }
+ .jp-mode-icon svg { width: 1.2rem; height: 1.2rem; stroke-width: 2; }
+ .jp-mode-name { font-size: 0.75rem; line-height: 1.1; }
+ .jp-mode-sub { display: none; }
+ .jp-word-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
+ .jp-word-quiz-question { font-size: 2.5rem; }
+}
+@media (max-width: 480px) {
+ .jp-filters { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
+ .jp-filter-group { width: 100%; flex-direction: column; align-items: flex-start; }
+ .jp-pills { width: 100%; }
+ .jp-pill { flex: 1; }
+}
+
+/* Conflict-safe mobile mode tab overrides. Keep these separate from the older
+ responsive block above so upstream responsive edits are less likely to clash. */
+@media (max-width: 768px) {
.jp-modes {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
- margin-bottom: 1rem;
}
+
.jp-mode {
min-width: 0;
min-height: 58px;
- padding: 0.65rem 0.4rem;
- gap: 0.3rem;
box-sizing: border-box;
}
- .jp-mode:hover { transform: none; }
- .jp-mode-icon { font-size: 1.2rem; margin-bottom: 0; }
- .jp-mode-icon svg { width: 1.2rem; height: 1.2rem; stroke-width: 2; }
- .jp-mode-name {
- font-size: 0.88rem;
- line-height: 1.15;
- }
- .jp-mode-sub { display: none; }
- .jp-word-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
- .jp-word-quiz-question { font-size: 2.5rem; }
+
+ .jp-mode-name { font-size: 0.88rem; }
}
+
@media (max-width: 480px) {
.jp-page { padding-left: 1rem; padding-right: 1rem; }
- .jp-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
+
+ .jp-modes {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.55rem;
+ }
+
.jp-mode {
flex-direction: row;
justify-content: center;
min-height: 52px;
padding: 0.65rem 0.55rem;
}
+
.jp-mode:last-child { grid-column: 1 / -1; }
.jp-mode-name { font-size: 0.95rem; }
- .jp-filters { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
- .jp-filter-group { width: 100%; flex-direction: column; align-items: flex-start; }
- .jp-pills { width: 100%; }
- .jp-pill { flex: 1; }
}
@media (max-width: 340px) {
From d47ae4acdbc3c5154eeb890fc328239cfa4429bd Mon Sep 17 00:00:00 2001
From: Basu Jindal <42815171+basujindal@users.noreply.github.com>
Date: Wed, 3 Jun 2026 18:52:20 -0700
Subject: [PATCH 3/3] Move Japanese mobile overrides to separate stylesheet
---
css/japanese-mobile.css | 40 ++++++++++++++++++++++++++++++++++++++++
css/japanese.css | 41 -----------------------------------------
japanese/index.html | 1 +
3 files changed, 41 insertions(+), 41 deletions(-)
create mode 100644 css/japanese-mobile.css
diff --git a/css/japanese-mobile.css b/css/japanese-mobile.css
new file mode 100644
index 00000000..47195686
--- /dev/null
+++ b/css/japanese-mobile.css
@@ -0,0 +1,40 @@
+/* Mobile-only overrides for the Japanese mode tabs.
+ Kept separate from japanese.css to avoid PR conflicts in the main stylesheet. */
+@media (max-width: 768px) {
+ .jp-modes {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 0.5rem;
+ }
+
+ .jp-mode {
+ min-width: 0;
+ min-height: 58px;
+ box-sizing: border-box;
+ }
+
+ .jp-mode-name { font-size: 0.88rem; }
+}
+
+@media (max-width: 480px) {
+ .jp-page { padding-left: 1rem; padding-right: 1rem; }
+
+ .jp-modes {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.55rem;
+ }
+
+ .jp-mode {
+ flex-direction: row;
+ justify-content: center;
+ min-height: 52px;
+ padding: 0.65rem 0.55rem;
+ }
+
+ .jp-mode:last-child { grid-column: 1 / -1; }
+ .jp-mode-name { font-size: 0.95rem; }
+}
+
+@media (max-width: 340px) {
+ .jp-modes { grid-template-columns: 1fr; }
+ .jp-mode:last-child { grid-column: auto; }
+}
diff --git a/css/japanese.css b/css/japanese.css
index 350bcb8a..0a14b8fc 100644
--- a/css/japanese.css
+++ b/css/japanese.css
@@ -420,44 +420,3 @@ body.hide-romaji #panelWords .jp-word-quiz-romaji { display: none; }
.jp-pills { width: 100%; }
.jp-pill { flex: 1; }
}
-
-/* Conflict-safe mobile mode tab overrides. Keep these separate from the older
- responsive block above so upstream responsive edits are less likely to clash. */
-@media (max-width: 768px) {
- .jp-modes {
- grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 0.5rem;
- }
-
- .jp-mode {
- min-width: 0;
- min-height: 58px;
- box-sizing: border-box;
- }
-
- .jp-mode-name { font-size: 0.88rem; }
-}
-
-@media (max-width: 480px) {
- .jp-page { padding-left: 1rem; padding-right: 1rem; }
-
- .jp-modes {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 0.55rem;
- }
-
- .jp-mode {
- flex-direction: row;
- justify-content: center;
- min-height: 52px;
- padding: 0.65rem 0.55rem;
- }
-
- .jp-mode:last-child { grid-column: 1 / -1; }
- .jp-mode-name { font-size: 0.95rem; }
-}
-
-@media (max-width: 340px) {
- .jp-modes { grid-template-columns: 1fr; }
- .jp-mode:last-child { grid-column: auto; }
-}
diff --git a/japanese/index.html b/japanese/index.html
index 3a216e76..0cfe60a8 100644
--- a/japanese/index.html
+++ b/japanese/index.html
@@ -9,6 +9,7 @@
+