*flexes*

components/Login/helpers/server-address.tsx

@@ -61,7 +61,7 @@ export default function ServerAddress(): React.JSX.Element {
             <Heading>
                 Connect to Jellyfin
             </Heading>
-            <XStack fullscreen>
+            <XStack flex={3} gap="$2">
                 <SwitchWithLabel 
                     checked={useHttps} 
                     onCheckedChange={(checked) => setUseHttps(checked)} 
@@ -70,13 +70,11 @@ export default function ServerAddress(): React.JSX.Element {
                     width={100}
                  />
                     
-                
-                <Spacer />
-
                 <Input 
                     value={serverAddress}
                     placeholder="jellyfin.org"
                     onChangeText={setServerAddress} 
+                    flex={2}
                     />
             </XStack>
 

components/helpers/input.tsx

@@ -7,7 +7,8 @@ interface InputProps {
     placeholder: string
     value: string | undefined;
     secureTextEntry?: boolean | undefined;
-    width?: number | undefined
+    width?: number | undefined;
+    flex?: number | "unset" | undefined;
 }
 
 export default function Input(props: InputProps): React.JSX.Element {
@@ -18,6 +19,7 @@ export default function Input(props: InputProps): React.JSX.Element {
             onChangeText={props.onChangeText} 
             value={props.value}
             width={props.width}
+            flex={props.flex}
             secureTextEntry={props.secureTextEntry}
         />
     )