Merge pull request #4 from anas-rashid/fix/dictionary-panel-crushes-narrow-page

Open the dictionary as a sheet where a panel would crush the poem

app/src/main/java/com/ganjoor/android/ui/PoemScreen.kt

@@ -105,6 +105,14 @@ fun PoemScreen(
     val sidePanelOpen = LocalSidePanelOpen.current
     LaunchedEffect(sidePanelOpen) { if (sidePanelOpen) tapped = null }
 
+    BoxWithConstraints(Modifier.fillMaxSize()) {
+    // Whether the dictionary gets a column of its own is not a question about the window but
+    // about what is left of this page once the columns have taken theirs. On a book-style
+    // foldable held open in portrait the page is already down to ~450dp, and a panel beside it
+    // left the verse a couple of characters a line. Where it does not fit, the sheet is the
+    // better answer: it covers the foot of the poem but leaves the lines whole.
+    val roomForPanel = wide && maxWidth - DictionaryPanelWidth >= MinPageMeasure
+
     Load(
         key = fullUrl,
         block = { Ganjoor.poem(fullUrl) },
@@ -239,7 +247,7 @@ fun PoemScreen(
             }
         }
         }
-        if (wide) {
+        if (roomForPanel) {
             AnimatedVisibility(
                 visible = tapped != null,
                 enter = expandHorizontally() + fadeIn(),
@@ -257,7 +265,7 @@ fun PoemScreen(
         }
     }
 
-    if (!wide) {
+    if (!roomForPanel) {
         tapped?.let { tap ->
             WordSheet(
                 word = tap.word,
@@ -267,6 +275,7 @@ fun PoemScreen(
         }
     }
     }
+}
 
 /** The positions that make a line of verse; anything else (Single, Paragraph, Comment) is prose. */
 private val VERSE_POSITIONS = setOf(Verse.RIGHT, Verse.LEFT, Verse.CENTERED_1, Verse.CENTERED_2)

app/src/main/java/com/ganjoor/android/ui/WordSheet.kt

@@ -57,6 +57,13 @@ import com.ganjoor.android.ui.theme.readingStyle
  */
 val DictionaryPanelWidth = 216.dp
 
+/**
+ * The narrowest the page may be left once the dictionary opens beside it. Below this the panel is
+ * not worth its room: on a book-style foldable held open in portrait the columns have already
+ * taken theirs, and a panel there left the verse a couple of characters a line.
+ */
+val MinPageMeasure = 400.dp
+
 /** English prose inside an otherwise right-to-left sheet. */
 @Composable
 private fun LeftToRight(content: @Composable () -> Unit) {

design/components/ColumnBrowser/README.md

@@ -45,6 +45,10 @@ On large screens, tapping a word opens **WordPanel** on the left instead of the
 - The poem moves over to make room, so nothing being read is covered.
 - The tapped word stays highlighted in the verse (`secondary-container` / `on-secondary-container`), on phones too.
 - ✕ or Back closes the panel.
+- The panel only opens where the page keeps at least **400dp** beside it. On a book-style
+  foldable held open in portrait the columns have already taken their room, and a panel
+  there left the verse a couple of characters a line. Below that the sheet is used instead:
+  it covers the foot of the poem but leaves the lines whole.
 
 ## Reading settings