Fix lemma wrapping and page layout

src/App.css

@@ -282,7 +282,7 @@ textarea:focus-visible {
 .page-system {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr) auto;
+  grid-template-rows: minmax(0, 1fr) auto auto auto;
   min-height: 0;
   overflow: visible;
   perspective: 1400px;
@@ -299,6 +299,7 @@ textarea:focus-visible {
 
 .bible-page {
   display: grid;
+  grid-column: 1;
   grid-template-rows: auto minmax(0, 1fr);
   min-height: 0;
   padding: 26px 30px;
@@ -317,7 +318,7 @@ textarea:focus-visible {
 }
 
 .page-turner {
-  grid-column: 1 / -1;
+  grid-column: 1;
   padding: 14px 30px;
   border-top: 1px solid #e8e2d4;
   background: #fffef8;
@@ -414,6 +415,9 @@ textarea:focus-visible {
 }
 
 .study-margin {
+  grid-column: 2;
+  grid-row: 1 / -1;
+  min-width: 0;
   border-left: 1px solid #e4dece;
   background: #fbf8ef;
 }
@@ -448,8 +452,10 @@ textarea:focus-visible {
 .original-language-verse {
   display: grid;
   gap: 8px;
+  min-width: 0;
   margin: 0 0 14px;
   padding: 12px;
+  overflow: hidden;
   border: 1px solid #dfd6c2;
   border-radius: 6px;
   background: #fffdf6;
@@ -465,14 +471,20 @@ textarea:focus-visible {
 }
 
 .original-language-verse p {
+  min-width: 0;
   margin: 0;
 }
 
 .lemma-line-text {
+  display: block;
+  max-width: 100%;
+  overflow-wrap: anywhere;
   color: #1f211e;
   font-family: Georgia, 'Times New Roman', serif;
   font-size: 20px;
   line-height: 1.7;
+  white-space: normal;
+  word-break: normal;
 }
 
 .lemma-line-text[dir='rtl'] {
@@ -483,6 +495,7 @@ textarea:focus-visible {
 
 .lemma-word {
   display: inline;
+  overflow-wrap: anywhere;
   padding: 0 2px;
   border-radius: 3px;
   cursor: pointer;
@@ -614,7 +627,7 @@ textarea:focus-visible {
 
 .footnote-strip {
   display: flex;
-  grid-column: 1 / -1;
+  grid-column: 1;
   gap: 12px;
   align-items: flex-start;
   min-height: 50px;
@@ -771,7 +784,7 @@ textarea:focus-visible {
 
 .book-tabs {
   display: grid;
-  grid-column: 1 / -1;
+  grid-column: 1;
   grid-template-columns: repeat(24, minmax(0, 1fr));
   gap: 3px;
   align-items: flex-start;
@@ -1182,6 +1195,8 @@ textarea:focus-visible {
 
   .study-margin,
   .compare-pages .bible-page + .bible-page {
+    grid-column: 1;
+    grid-row: auto;
     border-top: 1px solid #e4dece;
     border-left: 0;
   }

src/App.tsx

@@ -624,7 +624,23 @@ function App() {
     const [bookPart, rest] = entry.reference.split(/ (?=\d+:\d+$)/)
     const [chapter, verse] = rest?.split(':').map(Number) ?? []
     if (!bookPart || !chapter || !verse) return
-    jumpTo(bookPart, chapter, verse)
+
+    const next = libraryVerses.find(
+      (entryVerse) =>
+        entryVerse.book === bookPart &&
+        entryVerse.chapter === chapter &&
+        entryVerse.verse === verse,
+    )
+    if (!next) return
+
+    triggerPageMotion(next.id >= (selectedVerse?.id ?? next.id) ? 'turn-forward' : 'turn-back')
+    setQuery('')
+    setSelectedStrong(null)
+    setVerses(libraryVerses)
+    setSelectedId(next.id)
+    if (!pageVerses.some((pageVerse) => pageVerse.id === next.id)) {
+      setPageStartId(findPageStartId(next))
+    }
   }
 
   function recordFootnote(referenceText: string, text: string) {