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.

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,