Fix styles on multiple screens

Author: CommanderRedYT

src/components/Charts/ImportantCharts.tsx

@@ -117,7 +117,7 @@ const ImportantCharts: FC = () => {
                   justifyContent: 'space-between',
                 }}
               >
-                <View>
+                <View style={{ flex: 1 }}>
                   <Text variant="titleMedium">
                     {t('livedata.configureGraphs')}
                   </Text>

src/components/StatusWidget.tsx

@@ -43,7 +43,7 @@ const StatusWidget: FC<StatusWidgetProps> = ({
                 gap: spacing,
               }}
             >
-              <Text variant="titleLarge" style={{ fontSize: 20 }}>
+              <Text variant="titleLarge" style={{ fontSize: 18 }}>
                 {title}
               </Text>
               {icon ? <Icon size={iconSize ?? 20} source={icon} /> : null}

src/components/modals/AddDatabaseModal.tsx

@@ -76,6 +76,8 @@ const AddDatabaseModal: FC<AddDatabaseModalProps> = props => {
               mode="outlined"
               onChangeText={setName}
               style={{ backgroundColor: theme.colors.elevation.level3 }}
+              autoCapitalize="none"
+              autoCorrect={false}
             />
           </Box>
           <Box mb={4}>
@@ -85,6 +87,9 @@ const AddDatabaseModal: FC<AddDatabaseModalProps> = props => {
               onChangeText={setBaseUrl}
               placeholder={baseUrlPlaceholder}
               style={{ backgroundColor: theme.colors.elevation.level3 }}
+              textContentType="URL"
+              autoCapitalize="none"
+              autoCorrect={false}
             />
           </Box>
           <Box mb={4}>
@@ -93,6 +98,8 @@ const AddDatabaseModal: FC<AddDatabaseModalProps> = props => {
               mode="outlined"
               onChangeText={setUsername}
               style={{ backgroundColor: theme.colors.elevation.level3 }}
+              autoCapitalize="none"
+              autoCorrect={false}
             />
           </Box>
           <Box mb={4}>
@@ -102,6 +109,9 @@ const AddDatabaseModal: FC<AddDatabaseModalProps> = props => {
               onChangeText={setPassword}
               style={{ backgroundColor: theme.colors.elevation.level3 }}
               secureTextEntry
+              textContentType="password"
+              autoCapitalize="none"
+              autoCorrect={false}
             />
           </Box>
         </Box>

src/views/navigation/screens/GraphsGroup/ManageDatabasesScreen.tsx

@@ -45,31 +45,44 @@ const ManageDatabasesScreen: FC<PropsWithNavigation> = ({ navigation }) => {
         <Appbar.Action icon="plus" onPress={handleClickAdd} />
       </Appbar.Header>
       <StyledView theme={theme}>
-        <Box style={{ flex: 1, width: '100%' }}>
+        <Box
+          style={{
+            flex: 1,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
           {!hasConfiguredDatabases ? (
-            <Box
-              style={{
-                display: 'flex',
-                justifyContent: 'center',
-                height: '100%',
-              }}
-            >
-              <Box mb={16}>
-                <Text style={{ textAlign: 'center' }} variant="titleLarge">
-                  {t('manageDatabases.noDatabasesConfigured')}
-                </Text>
-              </Box>
-              <Box mb={16}>
-                <Text style={{ textAlign: 'center' }} variant="titleMedium">
-                  {t('manageDatabases.noDatabasesConfiguredHint')}
-                </Text>
+            <Box>
+              <Box
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  height: '100%',
+                  width: '90%',
+                }}
+              >
+                <Box mb={16}>
+                  <Text style={{ textAlign: 'center' }} variant="titleLarge">
+                    {t('manageDatabases.noDatabasesConfigured')}
+                  </Text>
+                </Box>
+                <Box mb={16}>
+                  <Text style={{ textAlign: 'center' }} variant="titleMedium">
+                    {t('manageDatabases.noDatabasesConfiguredHint')}
+                  </Text>
+                </Box>
+                <Button icon="plus" onPress={handleClickAdd}>
+                  {t('manageDatabases.addDatabase')}
+                </Button>
               </Box>
-              <Button icon="plus" onPress={handleClickAdd}>
-                {t('manageDatabases.addDatabase')}
-              </Button>
             </Box>
           ) : (
-            <ScrollView style={{ marginTop: 16, marginBottom: 16 }}>
+            <ScrollView
+              style={{ marginTop: 16, marginBottom: 16, width: '100%' }}
+            >
               <Box style={{ gap: spacing, marginHorizontal: 16 }}>
                 {databases.map((config, index) => (
                   <StyledListItem