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:
parent
d940cb7f0f
commit
57dfc51d97
@ -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,
|
||||||
|
|||||||
@ -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,
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user