fix(layout): restore Profile root flex:1, harden Settings + ProfileHeader rows

ROOT CAUSE Profile-Page leer: View+ScrollView verloren beide flex:1
(experimentelle Edit). Ohne flex:1 hat root null Höhe → ScrollView
kollabiert → nur ProfileHeader sichtbar, Rest abgeschnitten.

Profile/index.tsx:
- View style={{ flex: 1, backgroundColor: '#ffffff' }} restored
- ScrollView style={{ flex: 1 }} restored
- Debug-Title "Profil DEBUG-23s00" → "Profil"
- Magenta debug-marker entfernt

Settings row (def. flex-row hardening gegen icon-stack-Bug):
- width: '100%' auf Pressable
- flexShrink:0, flexGrow:0 auf icon-Box
- minWidth:0, flexShrink:1 auf text-Container (Pflicht für RN-Wrap)
- numberOfLines={1} auf label + sublabel (verhindert column-illusion bei
  langem text)
- paddingVertical: 12 fuer breathing room

ProfileHeader hint (gleicher Pattern fix):
- width: '100%' + flexShrink:0 auf beide icons
- minWidth:0, flexShrink:1, numberOfLines={2} auf hint-text
- paddingVertical 10→12

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chahinebrini 2026-05-07 23:27:21 +02:00
parent d940cb7f0f
commit 57dfc51d97
3 changed files with 14 additions and 12 deletions

View File

@ -156,7 +156,7 @@ export default function ProfileScreen() {
return ( return (
<View style={{ flex: 1, backgroundColor: '#ffffff' }}> <View style={{ flex: 1, backgroundColor: '#ffffff' }}>
<AppHeader showBack title="Profil DEBUG-2300" /> <AppHeader showBack title="Profil" />
<ScrollView <ScrollView
ref={scrollViewRef} ref={scrollViewRef}
style={{ flex: 1 }} style={{ flex: 1 }}
@ -188,13 +188,6 @@ export default function ProfileScreen() {
}} }}
/> />
{/* TEMP DEBUG-MARKER nach ProfileHeader — wenn sichtbar: ProfileHeader voll rendered, Rest wird unterdrückt */}
<View style={{ backgroundColor: '#ff00ff', padding: 16, marginHorizontal: 8, borderRadius: 8 }}>
<Text style={{ color: '#ffffff', fontFamily: 'Nunito_700Bold', fontSize: 14, textAlign: 'center' }}>
DEBUG-AFTER-PROFILE-HEADER 2311
</Text>
</View>
<View <View
style={{ style={{
height: 1, height: 1,

View File

@ -405,10 +405,12 @@ export default function SettingsScreen() {
onPress={row.soon ? undefined : row.onPress} onPress={row.soon ? undefined : row.onPress}
disabled={row.soon} disabled={row.soon}
style={({ pressed }) => ({ style={({ pressed }) => ({
width: '100%',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
gap: 12, gap: 12,
paddingHorizontal: 14, paddingHorizontal: 14,
paddingVertical: 12,
minHeight: 56, minHeight: 56,
borderBottomWidth: i < section.rows.length - 1 ? 1 : 0, borderBottomWidth: i < section.rows.length - 1 ? 1 : 0,
borderBottomColor: 'rgba(0,0,0,0.04)', borderBottomColor: 'rgba(0,0,0,0.04)',
@ -425,6 +427,7 @@ export default function SettingsScreen() {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
flexShrink: 0, flexShrink: 0,
flexGrow: 0,
}} }}
> >
<Ionicons <Ionicons
@ -433,8 +436,9 @@ export default function SettingsScreen() {
color={row.destructive ? colors.error : row.iconColor} color={row.destructive ? colors.error : row.iconColor}
/> />
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 1, minWidth: 0, flexShrink: 1 }}>
<Text <Text
numberOfLines={1}
style={{ style={{
fontSize: 15, fontSize: 15,
color: row.destructive ? colors.error : colors.text, color: row.destructive ? colors.error : colors.text,
@ -445,6 +449,7 @@ export default function SettingsScreen() {
</Text> </Text>
{row.sublabel ? ( {row.sublabel ? (
<Text <Text
numberOfLines={1}
style={{ style={{
fontSize: 12, fontSize: 12,
color: colors.textMuted, color: colors.textMuted,

View File

@ -208,9 +208,10 @@ export function ProfileHeader({
hitSlop={6} hitSlop={6}
style={({ pressed }) => ({ style={({ pressed }) => ({
alignSelf: 'stretch', alignSelf: 'stretch',
width: '100%',
marginTop: 14, marginTop: 14,
paddingHorizontal: 14, paddingHorizontal: 14,
paddingVertical: 10, paddingVertical: 12,
borderRadius: 12, borderRadius: 12,
backgroundColor: '#f5f8ff', backgroundColor: '#f5f8ff',
borderWidth: 1, borderWidth: 1,
@ -221,10 +222,13 @@ export function ProfileHeader({
opacity: pressed ? 0.7 : 1, opacity: pressed ? 0.7 : 1,
})} })}
> >
<Ionicons name="heart-outline" size={16} color={colors.brandOrange} /> <Ionicons name="heart-outline" size={16} color={colors.brandOrange} style={{ flexShrink: 0 }} />
<Text <Text
numberOfLines={2}
style={{ style={{
flex: 1, flex: 1,
minWidth: 0,
flexShrink: 1,
fontSize: 12, fontSize: 12,
color: colors.text, color: colors.text,
fontFamily: 'Nunito_600SemiBold', fontFamily: 'Nunito_600SemiBold',
@ -233,7 +237,7 @@ export function ProfileHeader({
> >
Hilf uns rebreak besser zu machen fülle deine anonymen Daten aus. Hilf uns rebreak besser zu machen fülle deine anonymen Daten aus.
</Text> </Text>
<Ionicons name="chevron-forward" size={14} color={colors.textMuted} /> <Ionicons name="chevron-forward" size={14} color={colors.textMuted} style={{ flexShrink: 0 }} />
</Pressable> </Pressable>
) : null} ) : null}
</View> </View>