Shift ORP anchor on mobile

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
 

src/components/ReaderDisplay.tsx

@@ -19,11 +19,11 @@ export function ReaderDisplay({
 }: Props) {
   return (
     <div style={styles.mainArea} className="main-area">
-      <div style={styles.displayArea}>
+      <div style={styles.displayArea} className="display-area">
-        <div style={styles.focalGuide}>
+        <div style={styles.focalGuide} className="focal-guide">
-          <div style={styles.focalLine} />
+          <div style={styles.focalLine} className="focal-line left" />
-          <div style={styles.focalMarker} />
+          <div style={styles.focalMarker} className="focal-marker" />
-          <div style={styles.focalLine} />
+          <div style={styles.focalLine} className="focal-line right" />
         </div>
 
         <div style={styles.wordContainer} className="word-container">
@@ -31,6 +31,7 @@ export function ReaderDisplay({
             <div
               style={{
                 ...styles.wordDisplay,
+                left: "calc(50% - var(--orp-shift, 0px))",
                 transform: `translateY(-50%) translateX(calc(-${orpIndex}ch - 0.5ch))`,
               }}
               className="mono word-display"
@@ -47,6 +48,7 @@ export function ReaderDisplay({
             <div
               style={{
                 ...styles.wordDisplay,
+                left: "calc(50% - var(--orp-shift, 0px))",
                 transform: "translateY(-50%) translateX(-50%)",
               }}
               className="mono word-display"
@@ -56,13 +58,12 @@ export function ReaderDisplay({
           )}
         </div>
 
-        <div style={styles.focalGuide}>
+        <div style={styles.focalGuide} className="focal-guide">
-          <div style={styles.focalLine} />
+          <div style={styles.focalLine} className="focal-line left" />
-          <div style={styles.focalMarker} />
+          <div style={styles.focalMarker} className="focal-marker" />
-          <div style={styles.focalLine} />
+          <div style={styles.focalLine} className="focal-line right" />
         </div>
       </div>
     </div>
   );
 }
-

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 {