dimitar/fitaiProto
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix step progress header overflow on home card

Browse Source
This commit is contained in:
echo 2026-03-31 18:16:59 +02:00
parent 5010a579d6
commit 12d6c07186
1 changed files with 57 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
apps/mobile/src/app/(tabs)/index.tsx
View File

@ -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,