feat(desktop): ReadingColumn width cap, conditional Profile back, card styling pass

Introduces ReadingColumn, a top-level scaffold that caps feed/list
screens at 720 dp and centers them — matches the Twitter/Mastodon
desktop pattern so cards don't stretch disproportionately on 4K
displays. Applied to: Home, Reads, Notifications, Bookmarks, Drafts,
Highlights, Search, Thread, Profile, Settings. Messages stays
full-width (its own two-pane sizing). Chess, Relay Dashboard, Article
Reader/Editor keep their current full-width layouts (tools/reading
logic dictates width independently).

Header consistency:
- Bookmarks / Drafts / Highlights / Search now have a minimum header
  row height of 48dp so screens without action buttons sit at the
  same visual weight as screens with IconButtons.
- Drafts' "New Draft" button converted from text Button to IconButton
  for consistency with the other screens' icon-only actions.
- Settings title switched from headlineMedium to titleMedium and
  wrapped in the standard h=12/v=8 header row.

Profile back button:
- UserProfileScreen now takes canGoBack: Boolean = false. The back
  arrow only renders when stacked onto a nav stack (clicking a user
  in the feed / notifications). Top-level "My Profile" accessed via
  the nav rail has no back arrow — nothing above it to pop.
- Applied to both the in-header back button and the floating
  scroll-aware header that appears when scrolling through posts.

Home cards:
- NoteCard switched from surfaceVariant fill (gray) to surface (white)
  + 1dp elevation, matching LongFormCard on Reads. The subtle shadow
  gives the feed the same lift as the articles screen.

https://claude.ai/code/session_01NufduPfZvYQVYwLkbCjCUo

desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/Main.kt

@@ -29,7 +29,9 @@ 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.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.rememberScrollState
@@ -1319,16 +1321,34 @@ fun RelaySettingsScreen(
         accountManager.loadNwcConnection()
     }
 
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.TopCenter,
+    ) {
         Column(
-        modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState()),
+            modifier =
+                Modifier
+                    .fillMaxSize()
+                    .widthIn(max = 720.dp)
+                    .verticalScroll(rememberScrollState())
+                    .padding(horizontal = 12.dp),
+        ) {
+            Row(
+                modifier =
+                    Modifier
+                        .fillMaxWidth()
+                        .heightIn(min = 48.dp)
+                        .padding(vertical = 8.dp),
+                verticalAlignment = Alignment.CenterVertically,
             ) {
                 Text(
                     "Settings",
-            style = MaterialTheme.typography.headlineMedium,
+                    style = MaterialTheme.typography.titleMedium,
                     color = MaterialTheme.colorScheme.onBackground,
                 )
+            }
 
-        Spacer(Modifier.height(24.dp))
+            Spacer(Modifier.height(16.dp))
 
             // Wallet Connect Section
             Text(
@@ -1529,3 +1549,4 @@ fun RelaySettingsScreen(
             }
         }
     }
+}

desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/BookmarksScreen.kt

@@ -27,6 +27,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
@@ -247,12 +248,13 @@ fun BookmarksScreen(
     val currentEvents = if (selectedTab == BookmarkTab.PUBLIC) publicEvents else privateEvents
     val currentBookmarkIds = if (selectedTab == BookmarkTab.PUBLIC) publicBookmarkIds else privateBookmarkIds
 
-    Column(modifier = Modifier.fillMaxSize()) {
+    ReadingColumn {
         // Header with tabs
         Row(
             modifier =
                 Modifier
                     .fillMaxWidth()
+                    .heightIn(min = 48.dp)
                     .padding(horizontal = 12.dp, vertical = 8.dp),
             verticalAlignment = Alignment.CenterVertically,
         ) {

desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/DraftsScreen.kt

@@ -26,14 +26,14 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 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.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Button
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Icon
@@ -67,11 +67,12 @@ fun DraftsScreen(
     val scope = rememberCoroutineScope()
     var deleteTarget by remember { mutableStateOf<DraftEntry?>(null) }
 
-    Column(modifier = Modifier.fillMaxSize()) {
+    ReadingColumn {
         Row(
             modifier =
                 Modifier
                     .fillMaxWidth()
+                    .heightIn(min = 48.dp)
                     .padding(horizontal = 12.dp, vertical = 8.dp),
             horizontalArrangement = Arrangement.SpaceBetween,
             verticalAlignment = Alignment.CenterVertically,
@@ -81,9 +82,15 @@ fun DraftsScreen(
                 style = MaterialTheme.typography.titleMedium,
                 color = MaterialTheme.colorScheme.onBackground,
             )
-            Button(onClick = { onOpenEditor(null) }) {
+            // Convert "New Draft" button to an icon for consistency with other
-                Icon(MaterialSymbols.Add, contentDescription = null)
+            // screens' tabs-first + icon-actions header pattern.
-                Text("New Draft", modifier = Modifier.padding(start = 4.dp))
+            IconButton(onClick = { onOpenEditor(null) }, modifier = Modifier.size(32.dp)) {
+                Icon(
+                    MaterialSymbols.Add,
+                    contentDescription = "New Draft",
+                    tint = MaterialTheme.colorScheme.primary,
+                    modifier = Modifier.size(20.dp),
+                )
             }
         }
 

desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/FeedScreen.kt

@@ -489,7 +489,7 @@ fun FeedScreen(
     }
 
     Box(modifier = Modifier.fillMaxSize()) {
-        Column(modifier = Modifier.fillMaxSize()) {
+        ReadingColumn {
             // Header with compose button
             FeedHeader(
                 feedMode = feedMode,

desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/NotificationsScreen.kt

@@ -25,7 +25,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 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.padding
@@ -238,7 +237,7 @@ fun NotificationsScreen(
         }
     }
 
-    Column(modifier = Modifier.fillMaxSize()) {
+    ReadingColumn {
         FeedHeader(
             title = "Notifications",
             connectedRelayCount = connectedRelays.size,

desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/ReadingColumn.kt

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2025 Vitor Pamplona
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to use,
+ * copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the
+ * Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+package com.vitorpamplona.amethyst.desktop.ui
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+/**
+ * Maximum reading width for single-pane content screens. Matches the
+ * comfortable column width used by Twitter / Mastodon / Threads on desktop —
+ * wider than a book column (which tops out around 600 dp), narrower than a
+ * full-window feed, so cards don't stretch disproportionately on 4K displays.
+ */
+val DefaultReadingWidth: Dp = 720.dp
+
+/**
+ * A top-level content scaffold that caps width and centers its column on wide
+ * displays. Each feed / list / profile screen wraps its contents in this so
+ * cards maintain a consistent proportion across the whole app.
+ *
+ * Not used by:
+ * - Messages (two-pane layout with its own sizing)
+ * - Article Reader (has its own narrower reading-width logic)
+ * - Editor / Chess / Relay Dashboard (rely on full width for tools / boards)
+ */
+@Composable
+fun ReadingColumn(
+    modifier: Modifier = Modifier,
+    maxWidth: Dp = DefaultReadingWidth,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.TopCenter,
+    ) {
+        Column(
+            modifier = modifier.fillMaxSize().widthIn(max = maxWidth),
+            content = content,
+        )
+    }
+}

desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/ReadsScreen.kt

@@ -26,7 +26,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 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.padding
@@ -288,7 +287,7 @@ fun ReadsScreen(
         }
     }
 
-    Column(modifier = Modifier.fillMaxSize()) {
+    ReadingColumn {
         // Header — Messages-style: tabs left, refresh right. The selected tab
         // (Following / Global) acts as the screen title, so no separate label.
         Row(

desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/SearchScreen.kt

@@ -34,9 +34,11 @@ 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
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -289,10 +291,17 @@ fun SearchScreen(
         focusRequester.requestFocus()
     }
 
+    androidx.compose.foundation.layout.Box(
+        modifier =
+            androidx.compose.ui.Modifier
+                .fillMaxSize(),
+        contentAlignment = androidx.compose.ui.Alignment.TopCenter,
+    ) {
         Column(
             modifier =
                 modifier
                     .fillMaxSize()
+                    .widthIn(max = DefaultReadingWidth)
                     .onPreviewKeyEvent { event ->
                         if (event.type != KeyEventType.KeyDown) return@onPreviewKeyEvent false
                         when (event.key) {
@@ -335,6 +344,7 @@ fun SearchScreen(
                 modifier =
                     Modifier
                         .fillMaxWidth()
+                        .heightIn(min = 48.dp)
                         .padding(horizontal = 12.dp, vertical = 8.dp),
                 horizontalArrangement = Arrangement.SpaceBetween,
                 verticalAlignment = Alignment.CenterVertically,
@@ -513,6 +523,7 @@ fun SearchScreen(
             }
         }
     }
+}
 
 @Composable
 private fun SearchEmptyState(

desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/ThreadScreen.kt

@@ -198,7 +198,7 @@ fun ThreadScreen(
     val replyNotes = threadNotes.filter { it.idHex != noteId }
 
     Box(modifier = Modifier.fillMaxSize()) {
-        Column(modifier = Modifier.fillMaxSize()) {
+        ReadingColumn {
             // Header — Messages-style: compact row with back + titleMedium
             Row(
                 modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp),

desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/UserProfileScreen.kt

@@ -36,6 +36,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
@@ -115,6 +116,7 @@ fun UserProfileScreen(
     nwcConnection: com.vitorpamplona.quartz.nip47WalletConnect.Nip47WalletConnect.Nip47URINorm? = null,
     subscriptionsCoordinator: DesktopRelaySubscriptionsCoordinator? = null,
     onBack: () -> Unit,
+    canGoBack: Boolean = false,
     onCompose: () -> Unit = {},
     onNavigateToProfile: (String) -> Unit = {},
     onNavigateToThread: (String) -> Unit = {},
@@ -436,7 +438,8 @@ fun UserProfileScreen(
         previousFirstVisibleItemScrollOffset = currentOffset
     }
 
-    Box(modifier = Modifier.fillMaxSize()) {
+    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.TopCenter) {
+        Box(modifier = Modifier.fillMaxSize().widthIn(max = DefaultReadingWidth)) {
             if (connectedRelays.isEmpty()) {
                 LoadingState("Connecting to relays...")
             } else {
@@ -468,6 +471,10 @@ fun UserProfileScreen(
                             verticalAlignment = Alignment.CenterVertically,
                         ) {
                             Row(verticalAlignment = Alignment.CenterVertically) {
+                                // Back is shown only when stacked onto a nav stack (e.g.
+                                // clicked a user in the feed). Top-level "My Profile"
+                                // from the nav rail sets canGoBack = false so no arrow.
+                                if (canGoBack) {
                                     IconButton(onClick = onBack, modifier = Modifier.size(32.dp)) {
                                         Icon(
                                             MaterialSymbols.AutoMirrored.ArrowBack,
@@ -477,6 +484,7 @@ fun UserProfileScreen(
                                         )
                                     }
                                     Spacer(Modifier.width(8.dp))
+                                }
                                 Text(
                                     "Profile",
                                     style = MaterialTheme.typography.titleMedium,
@@ -899,13 +907,20 @@ fun UserProfileScreen(
                         Modifier
                             .fillMaxWidth()
                             .background(MaterialTheme.colorScheme.surface.copy(alpha = 0.95f))
-                        .padding(horizontal = 8.dp, vertical = 4.dp),
+                            .padding(horizontal = 12.dp, vertical = 4.dp),
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
-                IconButton(onClick = onBack) {
+                    if (canGoBack) {
-                    Icon(MaterialSymbols.AutoMirrored.ArrowBack, "Back")
+                        IconButton(onClick = onBack, modifier = Modifier.size(32.dp)) {
+                            Icon(
+                                MaterialSymbols.AutoMirrored.ArrowBack,
+                                contentDescription = "Back",
+                                tint = MaterialTheme.colorScheme.primary,
+                                modifier = Modifier.size(20.dp),
+                            )
+                        }
+                        Spacer(Modifier.width(4.dp))
                     }
-                Spacer(Modifier.width(8.dp))
                     UserAvatar(
                         userHex = pubKeyHex,
                         pictureUrl = picture,
@@ -922,6 +937,7 @@ fun UserProfileScreen(
                 }
             }
         }
+    }
 
     // Lightbox overlay
     lightboxState?.let { state ->

desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/deck/DeckColumnContainer.kt

@@ -460,6 +460,7 @@ internal fun OverlayContent(
                 nwcConnection = nwcConnection,
                 subscriptionsCoordinator = subscriptionsCoordinator,
                 onBack = onBack,
+                canGoBack = true,
                 onCompose = onShowComposeDialog,
                 onNavigateToProfile = onNavigateToProfile,
                 onNavigateToThread = onNavigateToThread,

desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/highlights/MyHighlightsScreen.kt

@@ -26,9 +26,9 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 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.lazy.LazyColumn
@@ -72,15 +72,21 @@ fun MyHighlightsScreen(
     val scope = rememberCoroutineScope()
     var deleteTarget by remember { mutableStateOf<HighlightData?>(null) }
 
-    Column(modifier = Modifier.fillMaxSize()) {
+    com.vitorpamplona.amethyst.desktop.ui.ReadingColumn {
+        Row(
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .heightIn(min = 48.dp)
+                    .padding(horizontal = 12.dp, vertical = 8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
             Text(
                 "Highlights",
                 style = MaterialTheme.typography.titleMedium,
                 color = MaterialTheme.colorScheme.onBackground,
-            modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp),
             )
-
+        }
-        Spacer(Modifier.height(8.dp))
 
         if (allHighlights.isEmpty()) {
             EmptyState(

desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/note/NoteCard.kt

@@ -160,8 +160,9 @@ fun NoteCard(
         modifier = modifier.fillMaxWidth(),
         colors =
             CardDefaults.cardColors(
-                containerColor = MaterialTheme.colorScheme.surfaceVariant,
+                containerColor = MaterialTheme.colorScheme.surface,
             ),
+        elevation = CardDefaults.cardElevation(defaultElevation = 1.dp),
     ) {
         Column(modifier = Modifier.padding(12.dp)) {
             // Header + text area — clickable to navigate to thread