Yêu Cầu Chỉnh Sửa: Tăng Chiều Cao Card Quà Tặng Trên Màn Hình BigFan

Ngày cập nhật: 08/07/2026
Loại: UI/UX Layout Fix — Card Height & Text Truncation

1. Vấn Đề Hiện Tại

Các card trong khu vực "Người nhận quà mới nhất" trên màn hình BigFan gồm 2 phần:

Vấn đề: Dòng text mô tả ở phần dưới đang bị cắt giữa chừng:

Phần cuối câu "quay may mắn" bị cắt mất, ảnh hưởng đến trải nghiệm đọc và hiểu thông tin của người dùng.

2. Nguyên Nhân

Card đang có chiều cao cố định (height hoặc minHeight cứng) không đủ để chứa toàn bộ nội dung text trong trường hợp câu dài. Điều này dẫn đến numberOfLines bị giới hạn hoặc overflow: hidden cắt nội dung hiển thị.

3. Yêu Cầu Chỉnh Sửa

3.1 Tăng chiều cao box quà (phần trên — icon + tên phần thưởng)

3.2 Tăng chiều cao box text (phần dưới — mô tả người nhận)

3.3 Chiều cao card tổng thể

4. Quy Tắc Độ Dài Text Theo Nguồn Nội Dung

Câu mô tả trong card có thể đến từ 2 nguồn với độ dài khác nhau:

Nguồn	Ví dụ nội dung	Số dòng ước tính
Vòng quay may mắn (dài hơn)	"Member Đăng ** Nguyễn vừa trúng Quà may mắn quà tặng từ vòng quay may mắn"*	~3 dòng
Marketing gửi quà (ngắn hơn)	"Member Nguyễn ** Tín vừa nhận được Voucher chúc mừng sinh nhật"*	~2 dòng

5. Gợi Ý Cấu Trúc Code (React Native)

// Card container — dùng minHeight thay cho height cứng
const RecentGiftCard = ({ iconColor, giftName, description, timeAgo, tag }) => (
  <View style={styles.cardWrapper}>

    {/* Phần trên: Box icon + tên quà */}
    <View style={[styles.giftIconBox, { backgroundColor: iconColor }]}>
      <GiftIcon />
      <Text style={styles.giftName}>{giftName}</Text>
    </View>

    {/* Phần dưới: Box mô tả */}
    <View style={styles.descriptionBox}>
      {/* Text KHÔNG giới hạn numberOfLines — để tự xuống dòng */}
      <Text style={styles.descriptionText}>{description}</Text>

      {/* Footer: Thời gian + Tag */}
      <View style={styles.cardFooter}>
        <Text style={styles.timeText}>{timeAgo}</Text>
        <View style={styles.tagBadge}>
          <Text style={styles.tagText}>{tag}</Text>
        </View>
      </View>
    </View>

  </View>
);

const styles = StyleSheet.create({
  cardWrapper: {
    width: 160,               // Chiều rộng cố định (card nằm trong horizontal scroll)
    minHeight: 220,           // Tăng minHeight tổng thể — đủ cho 3 dòng text
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#E8E8E8',
    overflow: 'hidden',
    backgroundColor: '#FFFFFF',
    marginRight: 12,
  },

  giftIconBox: {
    minHeight: 90,            // Tăng nhẹ so với trước để cân đối
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
  },

  giftName: {
    fontSize: 14,
    fontWeight: '700',
    marginTop: 6,
    textAlign: 'center',
    paddingHorizontal: 8,
  },

  descriptionBox: {
    flex: 1,                  // Cho phép phần này chiếm hết không gian còn lại
    padding: 10,
    justifyContent: 'space-between',
  },

  descriptionText: {
    fontSize: 13,
    color: '#333333',
    lineHeight: 19,
    // KHÔNG đặt numberOfLines — để text tự xuống dòng đủ nội dung
    flexShrink: 1,
  },

  cardFooter: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 8,
  },

  timeText: {
    fontSize: 11,
    color: '#999999',
  },

  tagBadge: {
    backgroundColor: '#EAF6FF',
    borderRadius: 20,
    paddingHorizontal: 8,
    paddingVertical: 2,
  },

  tagText: {
    fontSize: 11,
    color: '#2BA89A',
    fontWeight: '500',
  },
});

1. Vấn Đề Hiện Tại​

2. Nguyên Nhân​

3. Yêu Cầu Chỉnh Sửa​

3.1 Tăng chiều cao box quà (phần trên — icon + tên phần thưởng)​

3.2 Tăng chiều cao box text (phần dưới — mô tả người nhận)​

3.3 Chiều cao card tổng thể​

4. Quy Tắc Độ Dài Text Theo Nguồn Nội Dung​

5. Gợi Ý Cấu Trúc Code (React Native)​

Checklist Kỹ Thuật​