From 48b14d27a5cc049345215663c6f73c193fb19a31 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Fri, 24 Jul 2026 12:46:46 +0200
Subject: [PATCH] fix(app): align and simplify provider rows

---
 .../settings/providers-section.test.tsx       |  3 +-
 .../screens/settings/providers-section.tsx    | 60 +++++++++++--------
 2 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/packages/app/src/screens/settings/providers-section.test.tsx b/packages/app/src/screens/settings/providers-section.test.tsx
index 6af35b675..c4f825dd9 100644
--- a/packages/app/src/screens/settings/providers-section.test.tsx
+++ b/packages/app/src/screens/settings/providers-section.test.tsx
@@ -44,6 +44,7 @@ const { theme, snapshotState, configState, patchConfigMock, openProviderSettings
 );
 
 vi.mock("react-native", () => ({
+  Platform: { OS: "web" },
   View: ({ children, testID }: { children?: React.ReactNode; testID?: string }) =>
     React.createElement("div", { "data-testid": testID }, children),
   Text: ({ children }: { children?: React.ReactNode }) =>
@@ -90,7 +91,7 @@ vi.mock("react-native-unistyles", () => ({
     create: (factory: unknown) =>
       typeof factory === "function" ? (factory as (t: typeof theme) => unknown)(theme) : factory,
   },
-  useUnistyles: () => ({ theme }),
+  useUnistyles: () => ({ theme, rt: { breakpoint: "md" } }),
 }));
 
 vi.mock("lucide-react-native", () => {
diff --git a/packages/app/src/screens/settings/providers-section.tsx b/packages/app/src/screens/settings/providers-section.tsx
index 2d951c954..716eb3b8a 100644
--- a/packages/app/src/screens/settings/providers-section.tsx
+++ b/packages/app/src/screens/settings/providers-section.tsx
@@ -10,6 +10,7 @@ import {
   type PressableStateCallbackType,
 } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { settingsStyles } from "@/styles/settings";
 import { useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import { useHostFeature } from "@/runtime/host-features";
@@ -178,6 +179,7 @@ function ProviderRow({
 }: ProviderRowProps) {
   const { t } = useTranslation();
   const { theme } = useUnistyles();
+  const isCompact = useIsCompactFormFactor();
   const ProviderIcon = getProviderIcon(def.id);
   const providerError =
     enabled &&
@@ -229,10 +231,10 @@ function ProviderRow({
                 <Text style={settingsStyles.rowTitle} numberOfLines={1}>
                   {def.label}
                 </Text>
-                <Text style={styles.separator}>·</Text>
-                <StatusIndicator status={providerStatus} />
+                {!isCompact ? <Text style={styles.separator}>·</Text> : null}
+                <StatusIndicator status={providerStatus} compact={isCompact} />
               </View>
-              {providerError ? (
+              {providerError && !isCompact ? (
                 <Text style={styles.errorText} numberOfLines={3}>
                   {providerError}
                 </Text>
@@ -246,18 +248,20 @@ function ProviderRow({
               disabled={isToggling || isRemoving}
               accessibilityLabel={t("settings.providers.enableProvider", { name: def.label })}
             />
-            {canRemove ? (
-              <ProviderActionsMenu
-                providerId={def.id}
-                providerLabel={def.label}
-                isRemoving={isRemoving}
-                iconSize={theme.iconSize.sm}
-                foregroundColor={theme.colors.foreground}
-                foregroundMutedColor={theme.colors.foregroundMuted}
-                dangerColor={theme.colors.statusDanger}
-                onRemove={onRemove}
-              />
-            ) : null}
+            <View style={styles.menuSlot}>
+              {canRemove ? (
+                <ProviderActionsMenu
+                  providerId={def.id}
+                  providerLabel={def.label}
+                  isRemoving={isRemoving}
+                  iconSize={theme.iconSize.sm}
+                  foregroundColor={theme.colors.foreground}
+                  foregroundMutedColor={theme.colors.foregroundMuted}
+                  dangerColor={theme.colors.statusDanger}
+                  onRemove={onRemove}
+                />
+              ) : null}
+            </View>
           </View>
         </>
       )}
@@ -278,7 +282,7 @@ function getDotColor(tone: StatusTone, theme: ReturnType<typeof useUnistyles>["t
   }
 }
 
-function StatusIndicator({ status }: { status: ProviderStatus }) {
+function StatusIndicator({ status, compact }: { status: ProviderStatus; compact: boolean }) {
   const { t } = useTranslation();
   const { theme } = useUnistyles();
   const dotStyle = useMemo(
@@ -293,15 +297,19 @@ function StatusIndicator({ status }: { status: ProviderStatus }) {
       ) : (
         <View style={dotStyle} />
       )}
-      <Text style={styles.statusLabel}>{status.label}</Text>
-      {status.modelCount !== null ? (
+      {!compact ? (
         <>
-          <Text style={styles.separator}>·</Text>
-          <Text style={styles.statusLabel}>
-            {status.modelCount === 1
-              ? t("settings.providers.models.one")
-              : t("settings.providers.models.many", { count: status.modelCount })}
-          </Text>
+          <Text style={styles.statusLabel}>{status.label}</Text>
+          {status.modelCount !== null ? (
+            <>
+              <Text style={styles.separator}>·</Text>
+              <Text style={styles.statusLabel}>
+                {status.modelCount === 1
+                  ? t("settings.providers.models.one")
+                  : t("settings.providers.models.many", { count: status.modelCount })}
+              </Text>
+            </>
+          ) : null}
         </>
       ) : null}
     </View>
@@ -536,6 +544,10 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
     justifyContent: "center",
   },
+  menuSlot: {
+    width: 32,
+    height: 32,
+  },
   menuButtonHovered: {
     backgroundColor: theme.colors.surface2,
   },