From 12d6c071860a70a0d0cb6ff9635c205fdb681230 Mon Sep 17 00:00:00 2001
From: echo <petrovskidimitar@yandex.com>
Date: Tue, 31 Mar 2026 18:16:59 +0200
Subject: [PATCH] fix step progress header overflow on home card

---
 apps/mobile/src/app/(tabs)/index.tsx | 103 +++++++++++++++------------
 1 file changed, 57 insertions(+), 46 deletions(-)

diff --git a/apps/mobile/src/app/(tabs)/index.tsx b/apps/mobile/src/app/(tabs)/index.tsx
index 91aca56..c4728dc 100644
--- a/apps/mobile/src/app/(tabs)/index.tsx
+++ b/apps/mobile/src/app/(tabs)/index.tsx
@@ -568,6 +568,57 @@ export default function HomeScreen() {
           </MinimalCard>
         </View>
 
+        {/* Steps */}
+        <View style={styles.section}>
+          <SectionHeader title="Steps" subtitle="Daily movement progress" />
+          <MinimalCard variant="bordered" style={styles.progressCard}>
+            <View style={styles.progressHeader}>
+              <View style={styles.progressLabelRow}>
+                <View
+                  style={[
+                    styles.progressIcon,
+                    { backgroundColor: `${colors.workouts}20` },
+                  ]}
+                >
+                  <Text style={{ fontSize: 20 }}>👣</Text>
+                </View>
+                <View style={{ marginLeft: 12 }}>
+                  <Text style={[typography.h4, { color: colors.textPrimary }]}>
+                    Steps
+                  </Text>
+                  <Text
+                    style={[typography.caption, { color: colors.textTertiary }]}
+                  >
+                    {stepsLoading
+                      ? "Loading steps..."
+                      : !stepsSupported
+                        ? "Step tracking not supported on this device"
+                        : !stepsPermissionGranted
+                          ? "Enable motion access in settings"
+                          : steps >= stepsGoal
+                            ? "Daily step goal reached!"
+                            : `${Math.max(0, stepsGoal - steps)} steps remaining`}
+                  </Text>
+                </View>
+              </View>
+              <Text
+                style={[typography.h3, { color: colors.workouts }]}
+                numberOfLines={1}
+                adjustsFontSizeToFit
+                minimumFontScale={0.7}
+              >
+                {stepsLoading ? "--" : `${steps}/${stepsGoal}`}
+              </Text>
+            </View>
+            <ProgressBar
+              progress={Math.min(steps / stepsGoal, 1)}
+              color={colors.workouts}
+              height={12}
+              style={{ marginTop: 16 }}
+            />
+          </MinimalCard>
+        </View>
+
         {/* Quick Actions */}
         <View style={styles.section}>
           <SectionHeader
@@ -833,51 +884,6 @@ export default function HomeScreen() {
               style={{ marginTop: 16 }}
             />
           </MinimalCard>
-
-          <MinimalCard
-            variant="bordered"
-            style={[styles.progressCard, { marginTop: 12 }]}
-          >
-            <View style={styles.progressHeader}>
-              <View style={styles.progressLabelRow}>
-                <View
-                  style={[
-                    styles.progressIcon,
-                    { backgroundColor: `${colors.workouts}20` },
-                  ]}
-                >
-                  <Text style={{ fontSize: 20 }}>👣</Text>
-                </View>
-                <View style={{ marginLeft: 12 }}>
-                  <Text style={[typography.h4, { color: colors.textPrimary }]}>
-                    Steps
-                  </Text>
-                  <Text
-                    style={[typography.caption, { color: colors.textTertiary }]}
-                  >
-                    {stepsLoading
-                      ? "Loading steps..."
-                      : !stepsSupported
-                        ? "Step tracking not supported on this device"
-                        : !stepsPermissionGranted
-                          ? "Enable motion access in settings"
-                          : steps >= stepsGoal
-                            ? "Daily step goal reached!"
-                            : `${Math.max(0, stepsGoal - steps)} steps remaining`}
-                  </Text>
-                </View>
-              </View>
-              <Text style={[typography.h3, { color: colors.workouts }]}>
-                {stepsLoading ? "--" : `${steps}/${stepsGoal}`}
-              </Text>
-            </View>
-            <ProgressBar
-              progress={Math.min(steps / stepsGoal, 1)}
-              color={colors.workouts}
-              height={12}
-              style={{ marginTop: 16 }}
-            />
-          </MinimalCard>
         </View>
 
         {/* Recent Activity */}
@@ -1072,7 +1078,12 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
   },
-  progressLabelRow: { flexDirection: "row", alignItems: "center" },
+  progressLabelRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    minWidth: 0,
+  },
   progressIcon: {
     width: 48,
     height: 48,