feat(desktop): 12dp horizontal gutter around feed/list content

Content cards were butting up against the nav rail / window edge.
Added contentPadding = PaddingValues(horizontal = 12.dp) to every
scroll container so items sit inset by the same amount the header
row already uses — a consistent gutter the eye can anchor to.

Applied to: FeedScreen, ReadsScreen, NotificationsScreen,
BookmarksScreen, DraftsScreen, SearchScreen, MyHighlightsScreen,
UserProfileScreen, ThreadScreen, ChessScreen, RelayMetricsTab.
RelayConfigTab (verticalScroll Column) got the same horizontal
padding via its content modifier.

Messages is untouched — its two-pane layout with an internal
VerticalDivider already provides its own visual separation.

https://claude.ai/code/session_01NufduPfZvYQVYwLkbCjCUo
This commit is contained in:
Claude
2026-04-24 14:55:20 +00:00
parent ff12b6abbe
commit 08f9c8bfd4
12 changed files with 23 additions and 1 deletions
@@ -24,6 +24,7 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxHeight
@@ -416,6 +417,7 @@ private fun ChessLobby(
LazyColumn( LazyColumn(
state = listState, state = listState,
contentPadding = PaddingValues(horizontal = 12.dp),
verticalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp),
) { ) {
// Active games section (user is participant) // Active games section (user is participant)
@@ -22,6 +22,7 @@ package com.vitorpamplona.amethyst.desktop.ui
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@@ -303,6 +304,7 @@ fun BookmarksScreen(
else -> { else -> {
LazyColumn( LazyColumn(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(horizontal = 12.dp),
) { ) {
items(currentEvents, key = { it.id }) { event -> items(currentEvents, key = { it.id }) { event ->
Column( Column(
@@ -23,6 +23,7 @@ package com.vitorpamplona.amethyst.desktop.ui
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@@ -96,6 +97,7 @@ fun DraftsScreen(
) )
} else { } else {
LazyColumn( LazyColumn(
contentPadding = PaddingValues(horizontal = 12.dp),
verticalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp),
) { ) {
items(drafts, key = { it.slug }) { entry -> items(drafts, key = { it.slug }) { entry ->
@@ -25,6 +25,7 @@ import androidx.compose.foundation.TooltipArea
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@@ -546,6 +547,7 @@ fun FeedScreen(
is FeedState.Loaded -> { is FeedState.Loaded -> {
val loadedState by state.feed.collectAsState() val loadedState by state.feed.collectAsState()
LazyColumn( LazyColumn(
contentPadding = PaddingValues(horizontal = 12.dp),
verticalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp),
) { ) {
items(loadedState.list, key = { it.idHex }) { note -> items(loadedState.list, key = { it.idHex }) { note ->
@@ -22,6 +22,7 @@ package com.vitorpamplona.amethyst.desktop.ui
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@@ -256,6 +257,7 @@ fun NotificationsScreen(
) )
} else { } else {
LazyColumn( LazyColumn(
contentPadding = PaddingValues(horizontal = 12.dp),
verticalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp),
) { ) {
items(notifications.distinctBy { it.event.id }, key = { it.event.id }) { notification -> items(notifications.distinctBy { it.event.id }, key = { it.event.id }) { notification ->
@@ -23,6 +23,7 @@ package com.vitorpamplona.amethyst.desktop.ui
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@@ -359,6 +360,7 @@ fun ReadsScreen(
else -> { else -> {
LazyColumn( LazyColumn(
contentPadding = PaddingValues(horizontal = 12.dp),
verticalArrangement = Arrangement.spacedBy(12.dp), verticalArrangement = Arrangement.spacedBy(12.dp),
) { ) {
items(events, key = { it.id }) { event -> items(events, key = { it.id }) { event ->
@@ -28,6 +28,7 @@ import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@@ -523,6 +524,7 @@ private fun SearchEmptyState(
) { ) {
LazyColumn( LazyColumn(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(horizontal = 12.dp),
verticalArrangement = Arrangement.spacedBy(4.dp), verticalArrangement = Arrangement.spacedBy(4.dp),
) { ) {
// Saved searches // Saved searches
@@ -24,6 +24,7 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@@ -239,6 +240,7 @@ fun ThreadScreen(
else -> { else -> {
LazyColumn( LazyColumn(
contentPadding = PaddingValues(horizontal = 12.dp),
verticalArrangement = Arrangement.spacedBy(0.dp), verticalArrangement = Arrangement.spacedBy(0.dp),
) { ) {
// Root note // Root note
@@ -27,6 +27,7 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@@ -441,6 +442,7 @@ fun UserProfileScreen(
} else { } else {
LazyColumn( LazyColumn(
state = listState, state = listState,
contentPadding = PaddingValues(horizontal = 12.dp),
verticalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp),
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
) { ) {
@@ -23,6 +23,7 @@ package com.vitorpamplona.amethyst.desktop.ui.highlights
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@@ -88,6 +89,7 @@ fun MyHighlightsScreen(
) )
} else { } else {
LazyColumn( LazyColumn(
contentPadding = PaddingValues(horizontal = 12.dp),
verticalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp),
) { ) {
allHighlights.forEach { (addressTag, highlights) -> allHighlights.forEach { (addressTag, highlights) ->
@@ -73,7 +73,7 @@ fun RelayConfigTab(
modifier modifier
.fillMaxSize() .fillMaxSize()
.verticalScroll(rememberScrollState()) .verticalScroll(rememberScrollState())
.padding(top = 8.dp), .padding(horizontal = 12.dp, vertical = 8.dp),
) { ) {
// 1. Connected Relays (collapsed by default to show other sections) // 1. Connected Relays (collapsed by default to show other sections)
CollapsibleSection( CollapsibleSection(
@@ -22,6 +22,7 @@ package com.vitorpamplona.amethyst.desktop.ui.relay
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@@ -92,6 +93,7 @@ fun RelayMetricsTab(
LazyColumn( LazyColumn(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(horizontal = 12.dp),
verticalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp),
) { ) {
items(statuses, key = { it.url.url }) { status -> items(statuses, key = { it.url.url }) { status ->