From e9d7098ad022b7b9ce38d6f508044a194c7660dc Mon Sep 17 00:00:00 2001
From: lafay <2021211506@stu.hit.edu.cn>
Date: Sun, 26 Apr 2026 01:15:24 +0800
Subject: [PATCH] fix(auth): make verification code input responsive to screen
 width

Adjust cell width and font size based on device screen dimensions to prevent overflow on smaller screens. Calculate available width accounting for container padding and margins, with minimum cell width of 32px. Font size scales down from 28px to 24px or 20px as cell width decreases.
---
 .../common/VerificationCodeInput.tsx          | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/common/VerificationCodeInput.tsx b/src/components/common/VerificationCodeInput.tsx
index e183029..ddb8768 100644
--- a/src/components/common/VerificationCodeInput.tsx
+++ b/src/components/common/VerificationCodeInput.tsx
@@ -13,6 +13,7 @@ import {
   Platform,
   Text,
   ViewStyle,
+  useWindowDimensions,
 } from 'react-native';
 import { useAppColors, type AppColors } from '../../theme';
 
@@ -26,9 +27,12 @@ interface VerificationCodeInputProps {
   disabled?: boolean;
 }
 
-const CELL_WIDTH = 56;
+const DEFAULT_CELL_WIDTH = 56;
+const MIN_CELL_WIDTH = 32;
 const CELL_HEIGHT = 64;
 const CELL_MARGIN = 8;
+const CONTAINER_PADDING = 24 * 2; // matches parent scrollContent paddingHorizontal
+const EXTRA_MARGIN = 32; // additional safety margin
 
 export const VerificationCodeInput: React.FC<VerificationCodeInputProps> = ({
   value,
@@ -40,7 +44,13 @@ export const VerificationCodeInput: React.FC<VerificationCodeInputProps> = ({
   disabled = false,
 }) => {
   const colors = useAppColors();
-  const styles = createStyles(colors);
+  const { width: screenWidth } = useWindowDimensions();
+
+  const availableWidth = screenWidth - CONTAINER_PADDING - EXTRA_MARGIN;
+  const maxCellWidth = Math.floor(availableWidth / length) - CELL_MARGIN;
+  const cellWidth = Math.max(MIN_CELL_WIDTH, Math.min(DEFAULT_CELL_WIDTH, maxCellWidth));
+
+  const styles = createStyles(colors, cellWidth);
 
   // 为每个数字创建一个 ref
   const inputRefs = useRef<(TextInput | null)[]>(Array(length).fill(null));
@@ -200,7 +210,7 @@ export const VerificationCodeInput: React.FC<VerificationCodeInputProps> = ({
   );
 };
 
-function createStyles(colors: AppColors) {
+function createStyles(colors: AppColors, cellWidth: number) {
   return StyleSheet.create({
     container: {
       alignItems: 'center',
@@ -212,7 +222,7 @@ function createStyles(colors: AppColors) {
       alignItems: 'center',
     },
     cell: {
-      width: CELL_WIDTH,
+      width: cellWidth,
       height: CELL_HEIGHT,
       borderRadius: 12,
       borderWidth: 1.5,
@@ -238,7 +248,7 @@ function createStyles(colors: AppColors) {
       width: '100%',
       height: '100%',
       textAlign: 'center',
-      fontSize: 28,
+      fontSize: cellWidth >= 48 ? 28 : cellWidth >= 40 ? 24 : 20,
       fontWeight: '600',
       color: colors.text.primary,
       padding: 0,