From 5377a2b4664b583d0f0b9c9566637edd8f3da1cc Mon Sep 17 00:00:00 2001 From: Jean-Luc Makiola Date: Wed, 15 Jul 2026 19:15:51 +0200 Subject: [PATCH] fix(calendar): align the week-number gutter with the top bar hamburger MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The month grid was inset 4dp while its weekday header (and the loading grid) used 8dp, so the week-number column — and the day cells under their labels — sat 4dp left of where they should. Bring the grid to 8dp: the gutter centre now lands on the hamburger (4dp bar inset + 24dp half icon), and day cells sit under their weekday labels. The week view's header badge and hour labels had the same drift (a 48dp edge-to- edge gutter centres its content at 24dp, not 28dp). Its top section background bleeds full-width when scrolled, so instead of insetting the whole content, give just the gutter content an 8dp start inset to centre it on the hamburger too. Co-Authored-By: Claude Opus 4.8 --- .../calendula/ui/month/MonthScreen.kt | 5 ++++- .../jeanlucmakiola/calendula/ui/week/WeekScreen.kt | 13 ++++++++++--- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/app/src/main/java/de/jeanlucmakiola/calendula/ui/month/MonthScreen.kt b/app/src/main/java/de/jeanlucmakiola/calendula/ui/month/MonthScreen.kt index ac8df8d..023a90c 100644 --- a/app/src/main/java/de/jeanlucmakiola/calendula/ui/month/MonthScreen.kt +++ b/app/src/main/java/de/jeanlucmakiola/calendula/ui/month/MonthScreen.kt @@ -380,7 +380,10 @@ private fun MonthGrid( Column( modifier = Modifier .fillMaxSize() - .padding(horizontal = 4.dp, vertical = 4.dp), + // Match the weekday header's 8dp inset so day cells sit under their + // labels, and so the week-number gutter's centre lines up with the + // top bar's hamburger (4dp bar inset + 24dp half icon button). + .padding(horizontal = 8.dp, vertical = 4.dp), verticalArrangement = Arrangement.spacedBy(2.dp), ) { state.weeks.forEach { week -> diff --git a/app/src/main/java/de/jeanlucmakiola/calendula/ui/week/WeekScreen.kt b/app/src/main/java/de/jeanlucmakiola/calendula/ui/week/WeekScreen.kt index 1d7a2eb..57bd153 100644 --- a/app/src/main/java/de/jeanlucmakiola/calendula/ui/week/WeekScreen.kt +++ b/app/src/main/java/de/jeanlucmakiola/calendula/ui/week/WeekScreen.kt @@ -114,6 +114,10 @@ import kotlin.math.roundToInt private val HOUR_HEIGHT = 56.dp private val GUTTER_WIDTH = 48.dp +/** Start inset for the gutter's content (week badge + hour labels) so it centres + * on the top bar's hamburger: with a 48dp gutter, 8dp lands the centre at 28dp + * (the app bar's 4dp inset + 24dp half icon button). */ +private val GUTTER_CONTENT_START_INSET = 8.dp private val MIN_EVENT_HEIGHT = 24.dp private val ALL_DAY_ROW_HEIGHT = 24.dp private val ALL_DAY_VERTICAL_PADDING = 6.dp @@ -448,9 +452,10 @@ private fun WeekDayHeader( .padding(top = 4.dp, bottom = 8.dp), ) { // Mirror the day-column layout (empty weekday line + spacer) so the - // badge lines up vertically with the date numbers. + // badge lines up vertically with the date numbers. The start inset centres + // the badge on the top bar's hamburger (see GUTTER_CONTENT_START_INSET). Column( - modifier = Modifier.width(GUTTER_WIDTH), + modifier = Modifier.width(GUTTER_WIDTH).padding(start = GUTTER_CONTENT_START_INSET), horizontalAlignment = Alignment.CenterHorizontally, ) { Text(text = " ", style = MaterialTheme.typography.labelSmall) @@ -621,10 +626,12 @@ private fun Timeline( // soft corners are permanent at any scroll position (not just at the // day's start/end). Row(modifier = Modifier.fillMaxSize()) { - // Hour gutter (scrolls in sync with the day columns) + // Hour gutter (scrolls in sync with the day columns). Same start inset + // as the header badge so the labels sit under it and on the hamburger. Column( modifier = Modifier .width(GUTTER_WIDTH) + .padding(start = GUTTER_CONTENT_START_INSET) .fillMaxHeight() .verticalScroll(scrollState), ) {