starred/native
1
0
Fork 0
mirror of https://github.com/bulwarkmail/native.git synced 2026-11-04 16:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: widen the composer's field labels with the font size

Browse Source
This commit is contained in:
Linus Rath
2026-10-15 03:21:18 +02:00
parent 7b93265b4f
commit 509583e729
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/ComposeScreen.tsx
+8 -5
View File
@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { import {
View, Text, StyleSheet, TextInput, Pressable, ScrollView, View, Text, StyleSheet, TextInput, Pressable, ScrollView,
Keyboard, Platform, ActivityIndicator, Alert, Modal, Switch, Keyboard, Platform, ActivityIndicator, Alert, Modal, Switch, useWindowDimensions,
} from 'react-native'; } from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'; import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { usePreventRemove } from '@react-navigation/native'; import { usePreventRemove } from '@react-navigation/native';
@@ -664,6 +664,10 @@ export default function ComposeScreen({ route, navigation }: Props) {
}); });
const editorRef = React.useRef<RichTextEditorHandle>(null); const editorRef = React.useRef<RichTextEditorHandle>(null);
// The label column grows with the system font size: at 1.3 "Betreff"
// wrapped into "Betref" / "f" in a fixed 56 dp column.
const { fontScale } = useWindowDimensions();
const fieldLabelWidth = React.useMemo(() => ({ width: Math.round(56 * Math.max(1, fontScale)) }), [fontScale]);
const subjectRef = React.useRef<TextInput>(null); const subjectRef = React.useRef<TextInput>(null);
const plainBodyRef = React.useRef<TextInput>(null); const plainBodyRef = React.useRef<TextInput>(null);
const [subjectFocused, setSubjectFocused] = React.useState(false); const [subjectFocused, setSubjectFocused] = React.useState(false);
@@ -2213,7 +2217,7 @@ export default function ComposeScreen({ route, navigation }: Props) {
const invalidInput = typedRecipients[field].invalid.length > 0 && !typedRecipients[field].valid.length && input.trim().length > 0 && activeField !== field; const invalidInput = typedRecipients[field].invalid.length > 0 && !typedRecipients[field].valid.length && input.trim().length > 0 && activeField !== field;
return ( return (
<View style={[styles.fieldRow, { zIndex }]}> <View style={[styles.fieldRow, { zIndex }]}>
<Text style={styles.fieldLabel}>{label}</Text> <Text style={[styles.fieldLabel, fieldLabelWidth]} numberOfLines={1}>{label}</Text>
<View style={styles.recipientField}> <View style={styles.recipientField}>
{list.map((r, i) => ( {list.map((r, i) => (
<RecipientChip <RecipientChip
@@ -2362,7 +2366,7 @@ export default function ComposeScreen({ route, navigation }: Props) {
contentContainerStyle={styles.scrollContent} contentContainerStyle={styles.scrollContent}
> >
<View style={styles.fieldRow}> <View style={styles.fieldRow}>
<Text style={styles.fieldLabel}>{t('email_composer.from', 'From')}</Text> <Text style={[styles.fieldLabel, fieldLabelWidth]} numberOfLines={1}>{t('email_composer.from', 'From')}</Text>
<Pressable <Pressable
onPress={openIdentityPicker} onPress={openIdentityPicker}
onLongPress={openFromOptions} onLongPress={openFromOptions}
@@ -2392,7 +2396,7 @@ export default function ComposeScreen({ route, navigation }: Props) {
{bccVisible && renderRecipientField('bcc', t('email_composer.bcc', 'Bcc'), t('email_composer.bcc_placeholder', 'Bcc recipients'), 4)} {bccVisible && renderRecipientField('bcc', t('email_composer.bcc', 'Bcc'), t('email_composer.bcc_placeholder', 'Bcc recipients'), 4)}
<View style={styles.fieldRow}> <View style={styles.fieldRow}>
<Text style={styles.fieldLabel}>{t('email_composer.subject', 'Subject')}</Text> <Text style={[styles.fieldLabel, fieldLabelWidth]} numberOfLines={1}>{t('email_composer.subject', 'Subject')}</Text>
<TextInput <TextInput
ref={subjectRef} ref={subjectRef}
disableFullscreenUI disableFullscreenUI
@@ -2984,7 +2988,6 @@ function makeStyles(c: ThemePalette) {
fieldLabel: { fieldLabel: {
...typography.body, ...typography.body,
color: c.textMuted, color: c.textMuted,
width: 56,
paddingTop: 10, paddingTop: 10,
}, },
fieldContent: { fieldContent: {