diff --git a/apps/mobile/src/features/settings/SettingsServerControlsRouteScreen.tsx b/apps/mobile/src/features/settings/SettingsServerControlsRouteScreen.tsx
index 6e7cef0de93dc3ee34de115aca829da3ca9b9ace..090467a8cd9095d294aa3eec93564f40e67a4be4 100644
--- a/apps/mobile/src/features/settings/SettingsServerControlsRouteScreen.tsx
+++ b/apps/mobile/src/features/settings/SettingsServerControlsRouteScreen.tsx
@@ -22,6 +22,7 @@ import {
   SettingsEnvironmentFilterHeader,
 } from "./components/SettingsEnvironmentFilterHeader";
 import { SettingsSection } from "./components/SettingsSection";
+import { SettingsControlRow } from "./components/SettingsControlRow";
 import { SettingsSwitchRow } from "./components/SettingsSwitchRow";
 import { SettingsProjectOverridesSection } from "./components/SettingsProjectOverridesSection";
 import { useSettingsEnvironmentFilter } from "./settings-environment-filter";
@@ -454,21 +455,21 @@ function FanoutSwitchRow(props: {
   }
 
   return (
-    <View className="flex-row items-center gap-4 p-4">
-      <SymbolView name={props.icon} size={22} tintColorClassName="accent-icon" />
-      <View className="min-w-0 flex-1 gap-1">
-        <Text className="text-lg text-foreground">{props.label}</Text>
-        <Text className="text-sm text-foreground-muted">{props.subtitle}</Text>
-      </View>
+    <SettingsControlRow
+      disabled={props.disabled}
+      icon={props.icon}
+      label={props.label}
+      subtitle={props.subtitle}
+    >
       <Pressable
         accessibilityLabel={`Set ${props.label} on for selected environments`}
         accessibilityRole="button"
         disabled={props.disabled}
-        className="rounded-full bg-subtle px-3 py-2 active:opacity-70 disabled:opacity-40"
+        className="rounded-full bg-subtle px-3 py-2 active:opacity-70"
         onPress={() => props.onValueChange(true)}
       >
         <Text className="text-sm font-t3-medium text-foreground">Mixed · Set on</Text>
       </Pressable>
-    </View>
+    </SettingsControlRow>
   );
 }
diff --git a/apps/mobile/src/features/settings/components/SettingsControlRow.tsx b/apps/mobile/src/features/settings/components/SettingsControlRow.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6f442af1b2fcd148bf496588a694bb997c762e94
--- /dev/null
+++ b/apps/mobile/src/features/settings/components/SettingsControlRow.tsx
@@ -0,0 +1,39 @@
+import type { ComponentProps, ReactNode } from "react";
+import { Platform, View } from "react-native";
+
+import { SymbolView } from "../../../components/AppSymbol";
+import { AppText as Text } from "../../../components/AppText";
+import { cn } from "../../../lib/cn";
+
+export function SettingsControlRow(props: {
+  readonly disabled?: boolean;
+  readonly icon: ComponentProps<typeof SymbolView>["name"];
+  readonly label: string;
+  readonly subtitle?: string;
+  readonly children: ReactNode;
+}) {
+  return (
+    <View
+      className={cn(
+        "flex-row items-center gap-4 p-4 android:min-h-14 android:py-3",
+        props.subtitle && "android:min-h-18",
+        props.disabled && "opacity-[0.45]",
+      )}
+    >
+      <SymbolView
+        name={props.icon}
+        size={Platform.OS === "android" ? 24 : 22}
+        tintColorClassName="accent-icon"
+        type="monochrome"
+        weight="regular"
+      />
+      <View className="min-w-0 flex-1 android:gap-1">
+        <Text className="text-lg text-foreground android:text-base">{props.label}</Text>
+        {props.subtitle ? (
+          <Text className="text-sm text-foreground-muted">{props.subtitle}</Text>
+        ) : null}
+      </View>
+      {props.children}
+    </View>
+  );
+}
diff --git a/apps/mobile/src/features/settings/components/SettingsSwitchRow.tsx b/apps/mobile/src/features/settings/components/SettingsSwitchRow.tsx
index 99bf0114f39f04309d21a764aabb1471d1db4cba..49fb98e49976ac9a1671385dd0299ccd6f97e59b 100644
--- a/apps/mobile/src/features/settings/components/SettingsSwitchRow.tsx
+++ b/apps/mobile/src/features/settings/components/SettingsSwitchRow.tsx
@@ -1,55 +1,27 @@
-import { cn } from "../../../lib/cn";
 import type { ComponentProps } from "react";
-import { Platform, View } from "react-native";
 
-import { SymbolView } from "../../../components/AppSymbol";
-import { AppText as Text } from "../../../components/AppText";
 import { ThemedSwitch } from "../../../components/ThemedSwitch";
+import { SettingsControlRow } from "./SettingsControlRow";
 
-type SymbolName = ComponentProps<typeof SymbolView>["name"];
-
-export function SettingsSwitchRow(props: {
-  readonly disabled?: boolean;
-  readonly icon: SymbolName;
-  readonly label: string;
-  readonly subtitle?: string;
-  readonly value: boolean;
-  readonly onValueChange: (value: boolean) => void;
-}) {
+export function SettingsSwitchRow(
+  props: Omit<ComponentProps<typeof SettingsControlRow>, "children"> & {
+    readonly value: boolean;
+    readonly onValueChange: (value: boolean) => void;
+  },
+) {
   return (
-    <View
-      className={cn(
-        "flex-row items-center gap-4",
-        Platform.OS === "android" ? "min-h-14 px-4 py-3" : "p-4",
-        Platform.OS === "android" && props.subtitle && "min-h-18",
-        props.disabled && "opacity-[0.45]",
-      )}
+    <SettingsControlRow
+      disabled={props.disabled}
+      icon={props.icon}
+      label={props.label}
+      subtitle={props.subtitle}
     >
-      <SymbolView
-        name={props.icon}
-        size={Platform.OS === "android" ? 24 : 22}
-        tintColorClassName="accent-icon"
-        type="monochrome"
-        weight="regular"
-      />
-      <View className={cn("min-w-0 flex-1", Platform.OS === "android" && "gap-1")}>
-        <Text
-          className={
-            Platform.OS === "android" ? "text-base text-foreground" : "text-lg text-foreground"
-          }
-        >
-          {props.label}
-        </Text>
-        {props.subtitle ? (
-          <Text className="text-sm text-foreground-muted">{props.subtitle}</Text>
-        ) : null}
-      </View>
       <ThemedSwitch
         accessibilityLabel={props.label}
         disabled={props.disabled}
         onValueChange={props.onValueChange}
         value={props.value}
       />
-    </View>
+    </SettingsControlRow>
   );
 }