From 6c3327944942f68c2d8e2f0a0c46866d04bb9984 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 24 Apr 2026 15:33:38 +0000 Subject: [PATCH] fix(desktop): compact text fields + normalize Settings section headers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Text fields: - Chat input (ChatPane) and Search field (SearchScreen) both used M3 OutlinedTextField defaults, which has a 56dp min-height tuned for mobile touch. On desktop that reads as "way too tall" — roughly double what Slack / Raycast / VS Code show. Overrode with Modifier.height(40.dp) / heightIn(min = 40.dp), paired with bodyMedium (14sp) textStyle and slightly smaller leading/trailing icons so the field sits at a desktop-native ~40dp when empty, still grows with content in the chat case. Settings section headers — normalized to titleSmall (14sp) so every section sits consistently under the "Settings" titleMedium (16sp) screen title: - "Wallet Connect (NWC)" (was titleLarge, already fixed) - "Relay Settings" (was titleLarge, already fixed) - "Tor" (was titleLarge, now titleSmall) - "Media Servers (Blossom)" (was titleMedium, now titleSmall) MediaServerSettings extra border removed — the parent RelaySettingsScreen already provides a 12dp horizontal gutter, but MediaServerSettings was adding another 16dp all-sides padding on top, showing as a visible inner frame. Dropped that wrapper padding. https://claude.ai/code/session_01NufduPfZvYQVYwLkbCjCUo --- .../amethyst/desktop/ui/SearchScreen.kt | 19 +++++++++++++++---- .../amethyst/desktop/ui/chats/ChatPane.kt | 15 +++++++++++++-- .../ui/settings/MediaServerSettings.kt | 7 +++++-- .../desktop/ui/tor/TorSettingsSection.kt | 2 +- 4 files changed, 34 insertions(+), 9 deletions(-) diff --git a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/SearchScreen.kt b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/SearchScreen.kt index c1298df96..77774c165 100644 --- a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/SearchScreen.kt +++ b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/SearchScreen.kt @@ -377,28 +377,39 @@ fun SearchScreen( textFieldValue = it state.updateFromText(it.text) }, - modifier = Modifier.weight(1f).focusRequester(focusRequester), - placeholder = { Text("Search notes, people, tags... or use operators") }, + // .height(40.dp) overrides M3's 56dp min-height (intended for + // mobile touch) — desktop inputs should feel closer to Slack / + // Raycast / VS Code at ~40dp. + modifier = Modifier.weight(1f).height(40.dp).focusRequester(focusRequester), + textStyle = MaterialTheme.typography.bodyMedium, + placeholder = { + Text( + "Search notes, people, tags... or use operators", + style = MaterialTheme.typography.bodyMedium, + ) + }, leadingIcon = { Icon( MaterialSymbols.Search, contentDescription = "Search", tint = MaterialTheme.colorScheme.onSurfaceVariant, + modifier = Modifier.size(18.dp), ) }, trailingIcon = { if (displayText.isNotEmpty()) { - IconButton(onClick = { state.clearSearch() }) { + IconButton(onClick = { state.clearSearch() }, modifier = Modifier.size(28.dp)) { Icon( MaterialSymbols.Clear, contentDescription = "Clear", tint = MaterialTheme.colorScheme.onSurfaceVariant, + modifier = Modifier.size(18.dp), ) } } }, singleLine = true, - shape = RoundedCornerShape(12.dp), + shape = RoundedCornerShape(10.dp), ) if (account != null && !account.isReadOnly) { IconButton(onClick = { showRelayPicker = true }) { diff --git a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/ChatPane.kt b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/ChatPane.kt index 194a40c36..261934e09 100644 --- a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/ChatPane.kt +++ b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/chats/ChatPane.kt @@ -30,6 +30,7 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width @@ -718,9 +719,13 @@ private fun MessageInput( OutlinedTextField( value = messageText, onValueChange = onMessageChange, + // heightIn(min = 40.dp) overrides M3's 56dp mobile-touch min so the + // chat input sits at a desktop-sensible 40dp when empty; still grows + // to up to ~120dp with content via maxLines = 4. modifier = Modifier .weight(1f) + .heightIn(min = 40.dp) .onPreviewKeyEvent { event -> if (event.type != KeyEventType.KeyDown) return@onPreviewKeyEvent false // Cmd+Enter (Mac) or Ctrl+Enter to send @@ -732,10 +737,16 @@ private fun MessageInput( false } }, - placeholder = { Text("Message... (${if (isMacOS) "\u2318" else "Ctrl"}+Enter to send)") }, + textStyle = MaterialTheme.typography.bodyMedium, + placeholder = { + Text( + "Message... (${if (isMacOS) "\u2318" else "Ctrl"}+Enter to send)", + style = MaterialTheme.typography.bodyMedium, + ) + }, singleLine = false, maxLines = 4, - shape = RoundedCornerShape(12.dp), + shape = RoundedCornerShape(10.dp), ) IconButton( diff --git a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/settings/MediaServerSettings.kt b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/settings/MediaServerSettings.kt index 15bdea390..41cfddee0 100644 --- a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/settings/MediaServerSettings.kt +++ b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/settings/MediaServerSettings.kt @@ -92,10 +92,13 @@ fun MediaServerSettings( } } - Column(modifier = modifier.fillMaxWidth().padding(16.dp)) { + // Parent (RelaySettingsScreen) provides the 12dp horizontal gutter, so this + // column no longer adds its own all-sides 16dp which was showing up as an + // extra frame inside the settings screen. + Column(modifier = modifier.fillMaxWidth()) { Text( "Media Servers (Blossom)", - style = MaterialTheme.typography.titleMedium, + style = MaterialTheme.typography.titleSmall, ) Spacer(Modifier.height(8.dp)) diff --git a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/tor/TorSettingsSection.kt b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/tor/TorSettingsSection.kt index 33161d667..1020fc3c3 100644 --- a/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/tor/TorSettingsSection.kt +++ b/desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/tor/TorSettingsSection.kt @@ -70,7 +70,7 @@ fun TorSettingsSection( Row(verticalAlignment = Alignment.CenterVertically) { Text( "Tor", - style = MaterialTheme.typography.titleLarge, + style = MaterialTheme.typography.titleSmall, color = MaterialTheme.colorScheme.onBackground, ) Spacer(Modifier.width(12.dp))