fix(app): align and simplify provider rows

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", () => {

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>
+                {!isCompact ? <Text style={styles.separator}>·</Text> : null}
-                <StatusIndicator status={providerStatus} />
+                <StatusIndicator status={providerStatus} compact={isCompact} />
               </View>
-              {providerError ? (
+              {providerError && !isCompact ? (
                 <Text style={styles.errorText} numberOfLines={3}>
                   {providerError}
                 </Text>
@@ -246,6 +248,7 @@ function ProviderRow({
               disabled={isToggling || isRemoving}
               accessibilityLabel={t("settings.providers.enableProvider", { name: def.label })}
             />
+            <View style={styles.menuSlot}>
               {canRemove ? (
                 <ProviderActionsMenu
                   providerId={def.id}
@@ -259,6 +262,7 @@ function ProviderRow({
                 />
               ) : null}
             </View>
+          </View>
         </>
       )}
     </Pressable>
@@ -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,6 +297,8 @@ function StatusIndicator({ status }: { status: ProviderStatus }) {
       ) : (
         <View style={dotStyle} />
       )}
+      {!compact ? (
+        <>
           <Text style={styles.statusLabel}>{status.label}</Text>
           {status.modelCount !== null ? (
             <>
@@ -304,6 +310,8 @@ function StatusIndicator({ status }: { status: ProviderStatus }) {
               </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,
   },