fix(app): align agent profile controls

Keep trailing edit controls from changing section heading rhythm, and center each profile's icon with its own text block so one-line and noted rows share the same visual alignment.
This commit is contained in:
Mohamed Boudra
2026-08-12 17:27:08 +02:00
parent 474b4e70b4
commit 8e916fd2dc
2 changed files with 42 additions and 25 deletions
@@ -73,30 +73,32 @@ export function AgentProfileRow({
return ( return (
<View style={rowStyle} testID={`agent-profile-row-${profile.id}`}> <View style={rowStyle} testID={`agent-profile-row-${profile.id}`}>
<View style={styles.iconWrapper}> <View style={styles.rowMain}>
<AgentProfileGlyph icon={profile.icon} color={profile.color} size={ICON_SIZE.md} /> <View style={styles.iconWrapper}>
</View> <AgentProfileGlyph icon={profile.icon} color={profile.color} size={ICON_SIZE.md} />
<View style={settingsStyles.rowContent}>
<View style={styles.titleLine}>
<Text style={settingsStyles.rowTitle} numberOfLines={1}>
{profile.name}
</Text>
<Text style={styles.summary} numberOfLines={1}>
{summary}
</Text>
</View> </View>
{profile.notes ? ( <View style={settingsStyles.rowContent}>
<View style={styles.notes}> <View style={styles.titleLine}>
<ThemedFileText size={ICON_SIZE.xs} uniProps={mutedColorMapping} /> <Text style={settingsStyles.rowTitle} numberOfLines={1}>
<Text {profile.name}
style={styles.notesText} </Text>
numberOfLines={2} <Text style={styles.summary} numberOfLines={1}>
testID={`agent-profile-notes-${profile.id}`} {summary}
>
{profile.notes}
</Text> </Text>
</View> </View>
) : null} {profile.notes ? (
<View style={styles.notes}>
<ThemedFileText size={ICON_SIZE.xs} uniProps={mutedColorMapping} />
<Text
style={styles.notesText}
numberOfLines={2}
testID={`agent-profile-notes-${profile.id}`}
>
{profile.notes}
</Text>
</View>
) : null}
</View>
</View> </View>
<View style={styles.rowActions}> <View style={styles.rowActions}>
<Button <Button
@@ -145,12 +147,17 @@ const styles = StyleSheet.create((theme) => ({
alignItems: "center", alignItems: "center",
paddingVertical: theme.spacing[3], paddingVertical: theme.spacing[3],
}, },
rowMain: {
flex: 1,
flexDirection: "row",
alignItems: "flex-start",
gap: theme.spacing[2],
},
iconWrapper: { iconWrapper: {
width: theme.iconSize.md, width: theme.iconSize.md,
alignSelf: "flex-start",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
marginTop: theme.spacing[1], marginTop: 1,
}, },
titleLine: { titleLine: {
flexDirection: "row", flexDirection: "row",
+12 -2
View File
@@ -114,7 +114,7 @@ function AgentProfilesEditAction({ onPress }: { onPress: () => void }) {
accessibilityLabel={t("modelSelector.editProfilesLabel")} accessibilityLabel={t("modelSelector.editProfilesLabel")}
testID="model-profiles-edit" testID="model-profiles-edit"
> >
<ThemedPencil size={ICON_SIZE.sm} uniProps={foregroundExtraMutedMapping} /> <ThemedPencil size={ICON_SIZE.xs} uniProps={foregroundExtraMutedMapping} />
</Pressable> </Pressable>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="top" align="center" offset={8}> <TooltipContent side="top" align="center" offset={8}>
@@ -675,7 +675,11 @@ function AgentProfilesPickerSection({
<View style={styles.profilesContainer}> <View style={styles.profilesContainer}>
<View style={styles.sectionHeading}> <View style={styles.sectionHeading}>
<Text style={styles.sectionHeadingText}>{t("modelSelector.profiles")}</Text> <Text style={styles.sectionHeadingText}>{t("modelSelector.profiles")}</Text>
{onEditProfiles ? <AgentProfilesEditAction onPress={onEditProfiles} /> : null} {onEditProfiles ? (
<View style={styles.sectionHeadingAction}>
<AgentProfilesEditAction onPress={onEditProfiles} />
</View>
) : null}
</View> </View>
{rows.map((row) => ( {rows.map((row) => (
<AgentProfilePickerRowView key={row.id} row={row} onApply={handleApply} /> <AgentProfilePickerRowView key={row.id} row={row} onApply={handleApply} />
@@ -1217,6 +1221,7 @@ const styles = StyleSheet.create((theme) => ({
backgroundColor: theme.colors.border, backgroundColor: theme.colors.border,
}, },
sectionHeading: { sectionHeading: {
position: "relative",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
gap: theme.spacing[2], gap: theme.spacing[2],
@@ -1224,6 +1229,11 @@ const styles = StyleSheet.create((theme) => ({
paddingTop: theme.spacing[2], paddingTop: theme.spacing[2],
paddingBottom: theme.spacing[1], paddingBottom: theme.spacing[1],
}, },
sectionHeadingAction: {
position: "absolute",
top: theme.spacing[1],
right: isWeb ? theme.spacing[3] : theme.spacing[6],
},
sectionHeadingText: { sectionHeadingText: {
flex: 1, flex: 1,
fontSize: theme.fontSize.xs, fontSize: theme.fontSize.xs,