From f5870a3ea3131b204bbf7e46d911153fe671ad05 Mon Sep 17 00:00:00 2001
From: Noel Chou <noel_chou@sil.org>
Date: Mon, 24 Aug 2026 14:23:09 -0400
Subject: [PATCH] TT-7623 fix: keep three-digit references on one line on
 mobile

On the mobile Mark Verses screen, references with three-digit chapter
or verse numbers (e.g. "119:10b-11a", "119:13-120:5e") wrapped onto two
lines in the table, and the Edit Reference dialog title broke mid-number.

Shrink the table's Start-Stop column to its own content (was a fixed
42%) and set the reference text to nowrap so it keeps the freed width on
one line. In the dialog, drop the title to 1.1rem and keep the numeric
range in a nowrap span so the whole title fits one line on a phone.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../mobile/MarkVerses/EditReferenceDropdown.tsx  | 16 ++++++++++++++--
 .../mobile/MarkVerses/MarkVersesTable.tsx        |  9 ++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/components/PassageDetail/mobile/MarkVerses/EditReferenceDropdown.tsx b/src/renderer/src/components/PassageDetail/mobile/MarkVerses/EditReferenceDropdown.tsx
index 13571dc3a..f7cbe453c 100644
--- a/src/renderer/src/components/PassageDetail/mobile/MarkVerses/EditReferenceDropdown.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/MarkVerses/EditReferenceDropdown.tsx
@@ -419,8 +419,20 @@ export default function EditReferenceDropdown({
       fullWidth
       maxWidth="xs"
     >
-      <DialogTitle id="edit-reference-dialog-title">
-        {`${title} ${limits}`}
+      <DialogTitle
+        id="edit-reference-dialog-title"
+        sx={{
+          // Slightly smaller than the default h6 so the common
+          // "Edit Reference for 124.7-425.2" fits on one line on a phone.
+          fontSize: '1.1rem',
+        }}
+      >
+        {title}{' '}
+        {/* Keep the time-limit range together so it never breaks mid-number
+            (e.g. "124.7-" / "425.2") when it has three digits (TT-7623). */}
+        <Box component="span" sx={{ whiteSpace: 'nowrap' }}>
+          {limits}
+        </Box>
       </DialogTitle>
       <DialogContent sx={{ pt: 1 }}>
         <Box
diff --git a/src/renderer/src/components/PassageDetail/mobile/MarkVerses/MarkVersesTable.tsx b/src/renderer/src/components/PassageDetail/mobile/MarkVerses/MarkVersesTable.tsx
index 713989a23..3205de1c5 100644
--- a/src/renderer/src/components/PassageDetail/mobile/MarkVerses/MarkVersesTable.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/MarkVerses/MarkVersesTable.tsx
@@ -158,7 +158,10 @@ export default function MarkVersesTable({
                 <TableCell
                   sx={{
                     whiteSpace: 'nowrap',
-                    width: '42%',
+                    // Shrink to the limits text's own width (rather than a fixed
+                    // 42%) so the reference column keeps enough room to stay on
+                    // one line even for three-digit chapter:verse ranges (TT-7623).
+                    width: '1%',
                     pl: 1.5,
                     backgroundColor: 'inherit',
                     py: 0.75,
@@ -299,6 +302,10 @@ export default function MarkVersesTable({
                       aria-label={`verse-reference-${rowIndex}`}
                       sx={{
                         color: invalid ? 'error.main' : 'text.primary',
+                        // Keep the reference (e.g. "119:10b-11a") on a single
+                        // line instead of wrapping when it has three-digit
+                        // chapter/verse numbers (TT-7623).
+                        whiteSpace: 'nowrap',
                       }}
                     >
                       {reference.value || '-'}