fix(desktop): compact text fields + normalize Settings section headers

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
This commit is contained in:
Claude
2026-04-24 15:33:38 +00:00
parent c4ae0a30eb
commit 6c33279449
4 changed files with 34 additions and 9 deletions
@@ -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 }) {
@@ -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(
@@ -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))
@@ -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))