From beca79d8533a6afb57681105edc6b1b754836583 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 24 Apr 2026 16:17:34 +0000 Subject: [PATCH] fix(desktop): Messages divider blends into both panes Split the 12dp draggable divider into two 6dp halves: left half takes surfaceContainer (matching the conversation list pane's fill), right half takes surface (matching the chat pane's fill). The divider now reads as the shared edge between the two panes instead of a solid contrasting stripe cutting down the middle. https://claude.ai/code/session_01NufduPfZvYQVYwLkbCjCUo --- .../desktop/ui/chats/DesktopMessagesScreen.kt | 26 ++++++++++++++----- 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/DesktopMessagesScreen.kt b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/DesktopMessagesScreen.kt index 98bae6adc..e2e77337b 100644 --- a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/DesktopMessagesScreen.kt +++ b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/DesktopMessagesScreen.kt @@ -33,7 +33,6 @@ import androidx.compose.foundation.layout.width import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text -import androidx.compose.material3.VerticalDivider import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue @@ -381,12 +380,15 @@ private fun EmptyConversationState() { /** * Draggable vertical divider between the conversation list pane and the chat - * pane. 12dp wide hit area; cursor flips to the horizontal resize arrow on - * hover. + * pane. The hit area is split in half horizontally: the left half takes the + * conversation list's surfaceContainer fill, the right half takes the chat + * pane's surface fill, so the divider reads as a continuation of the two panes + * instead of a single contrasting stripe. Cursor flips to the horizontal + * resize arrow on hover. */ @Composable private fun MessagesDraggableDivider(onDrag: (Float) -> Unit) { - Box( + Row( modifier = Modifier .width(12.dp) @@ -398,8 +400,20 @@ private fun MessagesDraggableDivider(onDrag: (Float) -> Unit) { onDrag(dragAmount.x) } }, - contentAlignment = Alignment.Center, ) { - VerticalDivider(color = MaterialTheme.colorScheme.outlineVariant) + Box( + modifier = + Modifier + .width(6.dp) + .fillMaxHeight() + .background(MaterialTheme.colorScheme.surfaceContainer), + ) + Box( + modifier = + Modifier + .width(6.dp) + .fillMaxHeight() + .background(MaterialTheme.colorScheme.surface), + ) } }