android: the board takes three and four columns on a wide window, as the web does

The board was Fixed(2) at every width, so a tablet showed two wide columns
where the web shows three or four (#5311). The column count now follows the
web's NoteGrid breakpoints on the window's width: three from 1024dp, four
from 1280dp. A phone keeps two.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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