Fix lemma wrapping and page layout

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "libre-study",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "libre-study",
-      "version": "0.1.11",
+      "version": "0.1.12",
       "dependencies": {
         "@tauri-apps/api": "^2.11.1",
         "react": "^19.2.7",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "libre-study",
   "private": true,
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
   "scripts": {
     "dev": "vite --host 127.0.0.1",

src-tauri/Cargo.lock

@@ -77,7 +77,7 @@ checksum = "2a4385e2e34eb35d6b3efe798b9eb88096925d87726c0798709bf56d9ed84af3"
 
 [[package]]
 name = "app"
-version = "0.1.11"
+version = "0.1.12"
 dependencies = [
  "log",
  "rusqlite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "0.1.11"
+version = "0.1.12"
 description = "A Tauri App"
 authors = ["you"]
 license = ""

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Libre Study",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "identifier": "org.librestudy.desktop",
   "build": {
     "frontendDist": "../dist",

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) {