From 8e916fd2dca95381a0a795ec060432f868b2a6f5 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Wed, 12 Aug 2026 17:27:08 +0200
Subject: [PATCH] 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.
---
 .../settings/agent-profile-row.tsx            | 53 +++++++++++--------
 packages/app/src/components/model-browser.tsx | 14 ++++-
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/packages/app/src/agent-profiles/settings/agent-profile-row.tsx b/packages/app/src/agent-profiles/settings/agent-profile-row.tsx
index 4a766ec0f..e8da19219 100644
--- a/packages/app/src/agent-profiles/settings/agent-profile-row.tsx
+++ b/packages/app/src/agent-profiles/settings/agent-profile-row.tsx
@@ -73,30 +73,32 @@ export function AgentProfileRow({
 
   return (
     <View style={rowStyle} testID={`agent-profile-row-${profile.id}`}>
-      <View style={styles.iconWrapper}>
-        <AgentProfileGlyph icon={profile.icon} color={profile.color} size={ICON_SIZE.md} />
-      </View>
-      <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 style={styles.rowMain}>
+        <View style={styles.iconWrapper}>
+          <AgentProfileGlyph icon={profile.icon} color={profile.color} size={ICON_SIZE.md} />
         </View>
-        {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}
+        <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>
-        ) : 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 style={styles.rowActions}>
         <Button
@@ -145,12 +147,17 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
     paddingVertical: theme.spacing[3],
   },
+  rowMain: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.spacing[2],
+  },
   iconWrapper: {
     width: theme.iconSize.md,
-    alignSelf: "flex-start",
     alignItems: "center",
     justifyContent: "center",
-    marginTop: theme.spacing[1],
+    marginTop: 1,
   },
   titleLine: {
     flexDirection: "row",
diff --git a/packages/app/src/components/model-browser.tsx b/packages/app/src/components/model-browser.tsx
index e00a0328b..5fa2e45f7 100644
--- a/packages/app/src/components/model-browser.tsx
+++ b/packages/app/src/components/model-browser.tsx
@@ -114,7 +114,7 @@ function AgentProfilesEditAction({ onPress }: { onPress: () => void }) {
           accessibilityLabel={t("modelSelector.editProfilesLabel")}
           testID="model-profiles-edit"
         >
-          <ThemedPencil size={ICON_SIZE.sm} uniProps={foregroundExtraMutedMapping} />
+          <ThemedPencil size={ICON_SIZE.xs} uniProps={foregroundExtraMutedMapping} />
         </Pressable>
       </TooltipTrigger>
       <TooltipContent side="top" align="center" offset={8}>
@@ -675,7 +675,11 @@ function AgentProfilesPickerSection({
     <View style={styles.profilesContainer}>
       <View style={styles.sectionHeading}>
         <Text style={styles.sectionHeadingText}>{t("modelSelector.profiles")}</Text>
-        {onEditProfiles ? <AgentProfilesEditAction onPress={onEditProfiles} /> : null}
+        {onEditProfiles ? (
+          <View style={styles.sectionHeadingAction}>
+            <AgentProfilesEditAction onPress={onEditProfiles} />
+          </View>
+        ) : null}
       </View>
       {rows.map((row) => (
         <AgentProfilePickerRowView key={row.id} row={row} onApply={handleApply} />
@@ -1217,6 +1221,7 @@ const styles = StyleSheet.create((theme) => ({
     backgroundColor: theme.colors.border,
   },
   sectionHeading: {
+    position: "relative",
     flexDirection: "row",
     alignItems: "center",
     gap: theme.spacing[2],
@@ -1224,6 +1229,11 @@ const styles = StyleSheet.create((theme) => ({
     paddingTop: theme.spacing[2],
     paddingBottom: theme.spacing[1],
   },
+  sectionHeadingAction: {
+    position: "absolute",
+    top: theme.spacing[1],
+    right: isWeb ? theme.spacing[3] : theme.spacing[6],
+  },
   sectionHeadingText: {
     flex: 1,
     fontSize: theme.fontSize.xs,