fix(compose): move uploading indicator to its own line as a capsule pill

The "Uploading…" label was crammed into the compose toolbar's icon row
alongside six icon buttons, leaving no horizontal space — so the text
wrapped to three lines ("Uplo / ading / …"). Pull the spinner + label out
of the icon row into a dedicated line below it, wrapped in a rounded
surfaceVariant capsule with maxLines = 1 so it can never wrap. Animates
in/out with the upload lifecycle.

app/src/main/kotlin/com/darkwisp/app/ui/screen/ComposeScreen.kt

@@ -816,21 +816,6 @@ fun ComposeScreen(
                             )
                         }
 
-                        if (uploadProgress != null) {
-                            Spacer(Modifier.width(8.dp))
-                            CircularProgressIndicator(
-                                modifier = Modifier.size(20.dp),
-                                strokeWidth = 2.dp,
-                                color = MaterialTheme.colorScheme.primary
-                            )
-                            Spacer(Modifier.width(6.dp))
-                            Text(
-                                stringResource(R.string.compose_uploading),
-                                style = MaterialTheme.typography.bodySmall,
-                                color = MaterialTheme.colorScheme.onSurfaceVariant
-                            )
-                        }
-
                         Spacer(Modifier.weight(1f))
 
                             if (content.text.isNotBlank()) {
@@ -842,6 +827,41 @@ fun ComposeScreen(
                         }
                     }
 
+                    // Uploading indicator on its own line as a capsule pill, so
+                    // the label never has to wrap inside the crowded icon row.
+                    AnimatedVisibility(
+                        visible = uploadProgress != null,
+                        enter = expandVertically() + fadeIn(),
+                        exit = shrinkVertically() + fadeOut()
+                    ) {
+                        Row(
+                            modifier = Modifier.padding(start = 4.dp, top = 4.dp, bottom = 4.dp)
+                        ) {
+                            Surface(
+                                color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f),
+                                shape = RoundedCornerShape(50)
+                            ) {
+                                Row(
+                                    verticalAlignment = Alignment.CenterVertically,
+                                    modifier = Modifier.padding(horizontal = 12.dp, vertical = 6.dp)
+                                ) {
+                                    CircularProgressIndicator(
+                                        modifier = Modifier.size(16.dp),
+                                        strokeWidth = 2.dp,
+                                        color = MaterialTheme.colorScheme.primary
+                                    )
+                                    Spacer(Modifier.width(8.dp))
+                                    Text(
+                                        stringResource(R.string.compose_uploading),
+                                        style = MaterialTheme.typography.bodySmall,
+                                        maxLines = 1,
+                                        color = MaterialTheme.colorScheme.onSurfaceVariant
+                                    )
+                                }
+                            }
+                        }
+                    }
+
                     // Hashtag chips
                     AnimatedVisibility(
                         visible = hashtags.isNotEmpty(),