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;
   }