[native] Fix the styling of the QR URL screen on virtual devices

Summary: Update the styling. https://linear.app/comm/issue/ENG-10168/improve-qr-login-flow-on-dev {F4036713} Depends on D14314 Test Plan: Check if the field is displayed correctly. Reviewers: kamil, bartek Reviewed By: kamil Subscribers: ashoat Differential Revision: https://phab.comm.dev/D14315
CommE2E · Feb 10, 2025 · 4a42709 · 4a42709
1 parent 9f63b70
commit 4a42709
Showing 1 changed file with 21 additions and 17 deletions.
diff --git a/native/account/qr-auth/secondary-device-qr-code-scanner.react.js b/native/account/qr-auth/secondary-device-qr-code-scanner.react.js
@@ -19,6 +19,8 @@ import {
 import { useStyles, useColors } from '../../themes/colors.js';
 import Alert from '../../utils/alert.js';
 import { deviceIsEmulator } from '../../utils/url-utils.js';
+import AuthContainer from '../auth-components/auth-container.react.js';
+import AuthContentContainer from '../auth-components/auth-content-container.react.js';
 
 const barCodeTypes = [BarCodeScanner.Constants.BarCodeType.qr];
 
@@ -118,21 +120,23 @@ function SecondaryDeviceQRCodeScanner(props: Props): React.Node {
 
   if (deviceIsEmulator) {
     return (
-      <View style={styles.textInputContainer}>
-        <Text style={styles.header}>QR Code URL</Text>
-        <View style={styles.inputContainer}>
-          <TextInput
-            style={styles.input}
-            value={urlInput}
-            onChangeText={onChangeText}
-            placeholder="QR Code URL"
-            placeholderTextColor={panelForegroundTertiaryLabel}
-            autoFocus={true}
-            autoCapitalize="none"
-            autoCorrect={false}
-          />
-        </View>
-      </View>
+      <AuthContainer>
+        <AuthContentContainer style={styles.scrollViewContentContainer}>
+          <Text style={styles.header}>QR Code URL</Text>
+          <View style={styles.inputContainer}>
+            <TextInput
+              style={styles.input}
+              value={urlInput}
+              onChangeText={onChangeText}
+              placeholder="QR Code URL"
+              placeholderTextColor={panelForegroundTertiaryLabel}
+              autoFocus={true}
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+          </View>
+        </AuthContentContainer>
+      </AuthContainer>
     );
   }
   // Note: According to the BarCodeScanner Expo docs, we should adhere to two
@@ -167,8 +171,8 @@ const unboundStyles = {
     right: 0,
     bottom: 0,
   },
-  textInputContainer: {
-    paddingTop: 8,
+  scrollViewContentContainer: {
+    flexGrow: 1,
   },
   header: {
     color: 'panelBackgroundLabel',