From ffa84073ea7262e64f348d1b300cd8e706af1063 Mon Sep 17 00:00:00 2001
From: Mathieu Moran <mathieumoran1@gmail.com>
Date: Wed, 12 Aug 2026 04:43:38 -0400
Subject: [PATCH] fix: Settings header height matches other tabs + 48dp red
 underline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Settings Column padding removed from around header
- Cards use horizontal padding individually
- YarisHeader underline: full-width → 48dp
---
 .../java/com/yarisobd/app/SettingsScreen.kt   |  8 ++---
 .../yarisobd/app/ui/components/YarisHeader.kt | 32 +++++++++++--------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/android/app/src/main/java/com/yarisobd/app/SettingsScreen.kt b/android/app/src/main/java/com/yarisobd/app/SettingsScreen.kt
index f381f52..5fbf813 100644
--- a/android/app/src/main/java/com/yarisobd/app/SettingsScreen.kt
+++ b/android/app/src/main/java/com/yarisobd/app/SettingsScreen.kt
@@ -47,14 +47,14 @@ fun SettingsScreen(client: OkHttpClient) {
     var serverResult by remember { mutableStateOf<String?>(null) }
 
     Column(
-        modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState()).padding(16.dp)
+        modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState())
     ) {
         com.yarisobd.app.ui.components.YarisHeader()
-        Spacer(Modifier.height(8.dp))
+        Spacer(Modifier.height(16.dp))
 
         // Server credentials
         Card(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
             colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh)
         ) {
             Column(modifier = Modifier.padding(16.dp)) {
@@ -102,7 +102,7 @@ fun SettingsScreen(client: OkHttpClient) {
 
         // Network test
         Card(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
             colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh)
         ) {
             Column(modifier = Modifier.padding(16.dp)) {
diff --git a/android/app/src/main/java/com/yarisobd/app/ui/components/YarisHeader.kt b/android/app/src/main/java/com/yarisobd/app/ui/components/YarisHeader.kt
index 1ec909c..281a317 100644
--- a/android/app/src/main/java/com/yarisobd/app/ui/components/YarisHeader.kt
+++ b/android/app/src/main/java/com/yarisobd/app/ui/components/YarisHeader.kt
@@ -1,34 +1,40 @@
 package com.yarisobd.app.ui.components
 
+import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.yarisobd.app.ui.theme.YarisRed
 
-/** Shared branding header matching web UI: Racing Sans One YARIS with red underline */
+/** Shared branding header matching web UI style */
 @Composable
 fun YarisHeader() {
     Text(
-        "YARIS",
-        style = MaterialTheme.typography.headlineLarge.copy(
-            fontWeight = FontWeight.Black,
-            letterSpacing = 4.sp,
+        "YARIS-OBD",
+        style = MaterialTheme.typography.headlineMedium.copy(
+            fontWeight = FontWeight.Normal,
+            fontStyle = FontStyle.Italic,
+            letterSpacing = 1.5.sp,
         ),
-        color = MaterialTheme.colorScheme.onBackground,
-        modifier = Modifier.padding(start = 16.dp, top = 8.dp)
+        color = Color.White,
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis,
+        modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 12.dp)
     )
-    Spacer(Modifier.height(2.dp))
-    // Red accent underline
-    androidx.compose.foundation.Canvas(
+    Spacer(Modifier.height(1.dp))
+    // Red accent underline — 48dp wide
+    Canvas(
         Modifier
             .padding(start = 16.dp)
             .width(48.dp)
@@ -36,7 +42,7 @@ fun YarisHeader() {
     ) {
         drawRect(color = YarisRed)
     }
-    Spacer(Modifier.height(8.dp))
+    Spacer(Modifier.height(6.dp))
     Text(
         "phase 28 — android companion",
         style = MaterialTheme.typography.bodySmall,