diff --git a/android/app/src/main/java/com/fabledsword/inkwell/ui/BoardScreen.kt b/android/app/src/main/java/com/fabledsword/inkwell/ui/BoardScreen.kt index a8e8c5d..21eac23 100644 --- a/android/app/src/main/java/com/fabledsword/inkwell/ui/BoardScreen.kt +++ b/android/app/src/main/java/com/fabledsword/inkwell/ui/BoardScreen.kt @@ -60,6 +60,7 @@ import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.unit.dp @@ -454,7 +455,7 @@ private fun DrawerRow( } /** - * The board: a two-column masonry, matching the web and desktop. + * The board: a masonry of two to four columns, by window width, matching the web. * * Staggered rather than a uniform grid because notes are wildly different heights * — a one-line thought beside a twelve-item checklist — and forcing them to a @@ -469,8 +470,17 @@ private fun NoteBoard( onNoteAction: (Note, EditorAction) -> Unit, onConfirmDelete: (Note) -> Unit, ) { + // The web's breakpoints (NoteGrid.vue: three columns from `lg`, 1024px, four from + // `xl`, 1280px), on the window's width, so a tablet lays out like a browser of the + // same size. Below that it stays at two, where the web drops to one on a phone. + val windowWidth = LocalConfiguration.current.screenWidthDp + val columns = when { + windowWidth >= 1280 -> 4 + windowWidth >= 1024 -> 3 + else -> 2 + } LazyVerticalStaggeredGrid( - columns = StaggeredGridCells.Fixed(BOARD_COLUMNS), + columns = StaggeredGridCells.Fixed(columns), modifier = Modifier.fillMaxSize(), // Bottom padding clears the FAB, so the last note is never trapped under it. contentPadding = PaddingValues(start = GUTTER, end = GUTTER, top = 4.dp, bottom = 88.dp), @@ -577,8 +587,6 @@ fun StoreUnavailableScreen(reason: String?) { } } -private const val BOARD_COLUMNS = 2 - // Not private: the reminder notice is board content and has to line up with the // search bar and the cards, so it shares the board's gutter rather than guessing. internal val GUTTER = 12.dp