diff --git a/CHANGELOG.md b/CHANGELOG.md index b1800bc..a6e8d37 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Add an optional "Real WPM" indicator beneath the WPM control (computed from the last 60 seconds of reading) - Pause "Real WPM" updates while paused, add an adaptive timing toggle, and make the WPM setting reflect actual reading throughput - Add `Shift+↑/↓` shortcuts for adjusting WPM by 100 and document them in the shortcuts modal +- Improve mobile support for long words by shifting the focal point left ### 2026-02-07: 1.1.0 diff --git a/src/components/ReaderDisplay.tsx b/src/components/ReaderDisplay.tsx index e3153f9..0abf1f5 100644 --- a/src/components/ReaderDisplay.tsx +++ b/src/components/ReaderDisplay.tsx @@ -19,11 +19,11 @@ export function ReaderDisplay({ }: Props) { return (
-
-
-
-
-
+
+
+
+
+
@@ -31,6 +31,7 @@ export function ReaderDisplay({
-
-
-
-
+
+
+
+
); } - diff --git a/src/index.css b/src/index.css index b75184d..ac20a29 100644 --- a/src/index.css +++ b/src/index.css @@ -48,6 +48,10 @@ button:active { color: #ccc !important; } +.display-area { + --orp-shift: 0px; +} + /* Desktop: fixed book metadata */ @media (min-width: 866px) { .book-metadata { @@ -68,6 +72,41 @@ button:active { } @media (max-width: 600px) { + .display-area { + /* Shift the ORP anchor left so long words have more room on the right. */ + --orp-shift: 44px; + } + + /* Keep the guide spans full-width but move the marker (and thus the split) left. */ + .focal-guide { + position: relative !important; + justify-content: flex-start !important; + } + + .focal-guide .focal-marker { + position: absolute !important; + left: calc(50% - var(--orp-shift)) !important; + top: 50% !important; + transform: translateY(-50%) !important; + } + + .focal-guide .focal-line { + position: absolute !important; + top: 50% !important; + transform: translateY(-50%) !important; + max-width: none !important; + } + + .focal-guide .focal-line.left { + left: 0 !important; + right: calc(50% - var(--orp-shift)) !important; + } + + .focal-guide .focal-line.right { + left: calc(50% - var(--orp-shift)) !important; + right: 0 !important; + } + /* Hide text labels on buttons */ .icon-btn span, .text-btn-label {