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:
+15
-4
@@ -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 }) {
|
||||
|
||||
+13
-2
@@ -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(
|
||||
|
||||
+5
-2
@@ -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))
|
||||
|
||||
+1
-1
@@ -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))
|
||||
|
||||
Reference in New Issue
Block a user