Skip to main content

UI Style Change: Reduce Spacing in Account Screen Profile Header

Last Updated: 16/07/2026
Type: UI Layout Fix — Account Screen Padding
Screen: Account / Profile Screen (AccountScreen)
Severity: 🟢 Low — Layout formatting to optimize vertical screen space

Feedback Screenshot:

1. Identified Spacing Issues​

In the top header card of the Account Screen:

  1. Header Top Padding: There is excessive blank vertical space above the user avatar, pushing the profile card too far down.
  2. Profile Info Bottom Padding: The gap below the membership tier and points display (Hạng thành viên | Point khả dụng) is too tall, delaying the start of the utilities menu cards (Tiện ích and Dành cho bạn).

2. Style Adjustments (React Native)​

To optimize vertical screen estate and prevent unnecessary scrolling on smaller screens:

2.1 Adjusting Header Padding​

  • Action: Reduce the top padding of the header container. If using SafeAreaView or status bar padding, ensure no additional hardcoded paddings are stacked.
  • Specification: Reduce top padding from e.g., 40px or 50px down to 20px (or statusBarHeight + 16px).

2.2 Adjusting Bottom Margins of Profile Info​

  • Action: Reduce the bottom margin or padding of the membership info container before the scrollable menu list starts.
  • Specification: Set bottom margin/padding to a maximum of 12px or 16px (was likely 32px or more).

3. Style Code Spec​

3.1 Before (Excessive Spacing Styles)​

const styles = StyleSheet.create({
  headerContainer: {
    backgroundColor: '#6A4F2A', // Brown background
    paddingTop: 50,              // ❌ Too large top padding
    paddingBottom: 24,
    alignItems: 'center',
  },
  avatarContainer: {
    marginBottom: 12,
  },
  membershipRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 16,
    marginBottom: 32,            // ❌ Too large bottom spacing before next section
  },
  menuListContainer: {
    marginTop: 16,
    paddingHorizontal: 16,
  }
});

3.2 After (Compact & Optimized Styles)​

import { Platform, StatusBar } from 'react-native';

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight || 0;

const styles = StyleSheet.create({
  headerContainer: {
    backgroundColor: '#6A4F2A',
    // ✅ Keep layout safe but tight: safe top offset + small padding
    paddingTop: STATUS_BAR_HEIGHT + 16, 
    paddingBottom: 16,
    alignItems: 'center',
  },
  avatarContainer: {
    marginBottom: 8,
  },
  membershipRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 12,
    marginBottom: 16,            // ✅ Reduced gap to pull menu list upward
  },
  menuListContainer: {
    marginTop: 12,               // Pulled closer to the brown header card
    paddingHorizontal: 16,
  }
});

Technical Checklist​

  • Locate the view styling rules in AccountScreen.tsx (typically under /screens/account/ or /screens/profile/).
  • Inspect the main header card component (headerContainer style rule). Reduce the hardcoded paddingTop to use StatusBar.currentHeight or a lower base value like 16.
  • Inspect the bottom margin of the membership info row (membershipRow style rule) and reduce marginBottom to 16 or less.
  • Verify the scroll view behaves correctly without clipped components.
  • Test layout on:
    • Devices with status bar notches (e.g. iPhone 14/15) to verify safe top spacing.
    • Devices with physical Home buttons (e.g. iPhone SE) to verify no empty top margins.