fix(settings): align host switcher with sidebar rows

The host picker reused the composer trigger's content-width pill, so its
label sat 6px left of the section rows and the chevron hugged the label
instead of the trailing edge. Add a `block` mode to ComboboxTrigger that
fills the width and uses the sidebar-row gap, and size the status dot to
the icon footprint so the label and chevron line up with the rows below.

packages/app/src/components/ui/combobox-trigger.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, type ReactElement, type ReactNode } from "react";
+import { forwardRef, useCallback, useMemo, type ReactElement, type ReactNode } from "react";
 import {
   Pressable,
   View,
@@ -28,10 +28,15 @@ interface ComboboxTriggerProps extends Omit<PressableProps, "style" | "children"
   style?: TriggerStyleProp;
   children?: ReactNode;
   chevron?: ReactNode | null;
+  // Fill the Pressable's width and use the standard sidebar-row gap, so the
+  // trigger reads as a full-width row: the label expands and the chevron pins to
+  // the trailing edge. Default (false) keeps the content-width pill used by the
+  // composer triggers.
+  block?: boolean;
 }
 
 export const ComboboxTrigger = forwardRef<View, ComboboxTriggerProps>(function ComboboxTrigger(
-  { children, chevron, style, ...props },
+  { children, chevron, style, block = false, ...props },
   ref,
 ): ReactElement {
   const pressableStyle = useCallback(
@@ -44,9 +49,11 @@ export const ComboboxTrigger = forwardRef<View, ComboboxTriggerProps>(function C
     [style],
   );
 
+  const rowStyle = useMemo(() => [styles.row, block && styles.rowBlock], [block]);
+
   return (
     <Pressable ref={ref} collapsable={false} style={pressableStyle} {...props}>
-      <View style={styles.row}>
+      <View style={rowStyle}>
         {children}
         {chevron !== null &&
           (chevron ?? (
@@ -68,6 +75,10 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
     gap: theme.spacing[1],
   },
+  rowBlock: {
+    flexGrow: 1,
+    gap: theme.spacing[2],
+  },
   chevronContainer: {
     flexShrink: 0,
     transform: [{ translateY: 1 }],