header padding fix

This commit is contained in:
tapframe 2025-12-11 16:10:59 +05:30
parent 9e7543df02
commit bf22e559c5
2 changed files with 6 additions and 23 deletions

View file

@ -151,6 +151,7 @@ const ScreenHeader: React.FC<ScreenHeaderProps> = ({
style={[ style={[
styles.headerTitle, styles.headerTitle,
{ color: currentTheme.colors.text }, { color: currentTheme.colors.text },
isTablet && { fontSize: 48 }, // Increase font size for tablet
showBackButton && styles.headerTitleWithBack, showBackButton && styles.headerTitleWithBack,
titleStyle, titleStyle,
]} ]}

View file

@ -33,6 +33,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
import * as Sentry from '@sentry/react-native'; import * as Sentry from '@sentry/react-native';
import { getDisplayedAppVersion } from '../utils/version'; import { getDisplayedAppVersion } from '../utils/version';
import CustomAlert from '../components/CustomAlert'; import CustomAlert from '../components/CustomAlert';
import ScreenHeader from '../components/common/ScreenHeader';
import PluginIcon from '../components/icons/PluginIcon'; import PluginIcon from '../components/icons/PluginIcon';
import TraktIcon from '../components/icons/TraktIcon'; import TraktIcon from '../components/icons/TraktIcon';
import TMDBIcon from '../components/icons/TMDBIcon'; import TMDBIcon from '../components/icons/TMDBIcon';
@ -883,11 +884,8 @@ const SettingsScreen: React.FC = () => {
} }
}; };
const headerBaseHeight = Platform.OS === 'android' ? 80 : 60;
// Keep headers below floating top navigator on tablets by adding extra offset // Keep headers below floating top navigator on tablets by adding extra offset
const tabletNavOffset = isTablet ? 64 : 0; const tabletNavOffset = isTablet ? 64 : 0;
const topSpacing = (Platform.OS === 'android' ? (StatusBar.currentHeight || 0) : insets.top) + tabletNavOffset;
const headerHeight = headerBaseHeight + topSpacing;
if (isTablet) { if (isTablet) {
return ( return (
@ -1010,12 +1008,10 @@ const SettingsScreen: React.FC = () => {
{ backgroundColor: currentTheme.colors.darkBackground } { backgroundColor: currentTheme.colors.darkBackground }
]}> ]}>
<StatusBar barStyle={'light-content'} /> <StatusBar barStyle={'light-content'} />
<ScreenHeader
title="Settings"
/>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<View style={[styles.header, { height: headerHeight, paddingTop: topSpacing }]}>
<Text style={[styles.headerTitle, { color: currentTheme.colors.text }]}>
Settings
</Text>
</View>
<View style={styles.contentContainer}> <View style={styles.contentContainer}>
<ScrollView <ScrollView
@ -1123,20 +1119,6 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
}, },
// Mobile styles // Mobile styles
header: {
paddingHorizontal: Math.max(16, width * 0.05),
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
paddingBottom: 12,
backgroundColor: 'transparent',
zIndex: 2,
},
headerTitle: {
fontSize: Math.min(30, width * 0.075),
fontWeight: '700',
letterSpacing: -0.3,
},
contentContainer: { contentContainer: {
flex: 1, flex: 1,
zIndex: 1, zIndex: 1,
@ -1169,7 +1151,7 @@ const styles = StyleSheet.create({
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
sidebarTitle: { sidebarTitle: {
fontSize: 26, fontSize: 42,
fontWeight: '700', fontWeight: '700',
letterSpacing: -0.3, letterSpacing: -0.3,
}, },