Fix small-screen header clipping (#519) (#532)

* Fix small-screen header clipping: reserve status-bar space and center-constrain titles (fixes #519)

* Remove redundant Gradle configuration lines

app/src/main/java/com/bitchat/android/ui/ChatHeader.kt

@@ -26,6 +26,8 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.text.style.TextAlign
 import com.bitchat.android.core.ui.utils.singleOrTripleClickable
 import androidx.compose.foundation.Canvas
 import androidx.compose.ui.geometry.Offset
@@ -406,7 +408,9 @@ private fun PrivateChatHeader(
             Text(
                 text = titleText,
                 style = MaterialTheme.typography.titleMedium,
-                color = Color(0xFFFF9500) // Orange
+                color = Color(0xFFFF9500), // Orange
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
             )
 
             Spacer(modifier = Modifier.width(4.dp))
@@ -493,8 +497,12 @@ private fun ChannelHeader(
             style = MaterialTheme.typography.titleMedium,
             color = Color(0xFFFF9500), // Orange to match input field
             modifier = Modifier
-                .align(Alignment.Center)
-                .clickable { onSidebarClick() }
+                .fillMaxWidth()
+                .padding(horizontal = 56.dp)
+                .clickable { onSidebarClick() },
+            textAlign = TextAlign.Center,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis
         )
         
         // Leave button - positioned on the right
@@ -552,7 +560,9 @@ private fun MainHeader(
                 modifier = Modifier.singleOrTripleClickable(
                     onSingleClick = onTitleClick,
                     onTripleClick = onTripleTitleClick
-                )
+                ),
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
             )
             
             Spacer(modifier = Modifier.width(2.dp))

app/src/main/java/com/bitchat/android/ui/ChatScreen.kt

@@ -23,6 +23,7 @@ import androidx.compose.ui.text.TextRange
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.Dp
+
 import androidx.compose.ui.zIndex
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.bitchat.android.model.BitchatMessage
@@ -113,6 +114,9 @@ fun ChatScreen(viewModel: ChatViewModel) {
             .background(colorScheme.background) // Extend background to fill entire screen including status bar
     ) {
         val headerHeight = 42.dp
+        // Reserve exact height: header + status bar inset so content below won't be overlapped
+        val statusBarTop = WindowInsets.statusBars.asPaddingValues().calculateTopPadding()
+        val reservedHeaderHeight = headerHeight + statusBarTop
 
         // Main content area that responds to keyboard/window insets
         Column(
@@ -121,11 +125,10 @@ fun ChatScreen(viewModel: ChatViewModel) {
                 .windowInsetsPadding(WindowInsets.ime) // This handles keyboard insets
                 .windowInsetsPadding(WindowInsets.navigationBars) // Add bottom padding when keyboard is not expanded
         ) {
-            // Header spacer - creates exact space for the floating header (status bar + compact header)
+            // Header spacer - reserve space equal to header + status bar inset
             Spacer(
                 modifier = Modifier
-                    .windowInsetsPadding(WindowInsets.statusBars)
-                    .height(headerHeight)
+                    .height(reservedHeaderHeight)
             )
 
             // Messages area - takes up available space, will compress when keyboard appears
@@ -254,15 +257,7 @@ fun ChatScreen(viewModel: ChatViewModel) {
             onLocationNotesClick = { showLocationNotesSheet = true }
         )
 
-        // Divider under header - positioned after status bar + header height
-        HorizontalDivider(
-            modifier = Modifier
-                .fillMaxWidth()
-                .windowInsetsPadding(WindowInsets.statusBars)
-                .offset(y = headerHeight)
-                .zIndex(1f),
-            color = colorScheme.outline.copy(alpha = 0.3f)
-        )
+
 
         val alpha by animateFloatAsState(
             targetValue = if (showSidebar) 0.5f else 0f,
@@ -459,9 +454,10 @@ private fun ChatFloatingHeader(
         modifier = Modifier
             .fillMaxWidth()
             .zIndex(1f)
-            .windowInsetsPadding(WindowInsets.statusBars), // Extend into status bar area
+            .statusBarsPadding(), // Respect status bar insets
         color = colorScheme.background // Solid background color extending into status bar
     ) {
+        Column {
             TopAppBar(
                 title = {
                     ChatHeaderContent(
@@ -489,8 +485,15 @@ private fun ChatFloatingHeader(
                 colors = TopAppBarDefaults.topAppBarColors(
                     containerColor = Color.Transparent
                 ),
-            modifier = Modifier.height(headerHeight) // Ensure compact header height
+                modifier = Modifier.heightIn(min = headerHeight) // Allow header to expand for accessibility font scales
             )
+
+            // Divider under header - always aligned with header bottom
+            Divider(
+                modifier = Modifier.fillMaxWidth(),
+                color = colorScheme.outline.copy(alpha = 0.3f)
+            )
+        }
     }
 }