fix(app): tune composer pill clearance by layout

Keep the roomier 16px separation on compact layouts while using 10px on wide layouts. Apply the same breakpoint contract to track and import-session pills so their spacing stays consistent.

packages/app/src/composer/draft/workspace-tab.tsx

@@ -752,8 +752,14 @@ const styles = StyleSheet.create((theme) => ({
   importPillRow: {
     width: "100%",
     paddingHorizontal: theme.spacing[4],
-    paddingTop: COMPOSER_PILL_CLEARANCE,
-    paddingBottom: COMPOSER_PILL_CLEARANCE,
+    paddingTop: {
+      xs: COMPOSER_PILL_CLEARANCE.compact,
+      md: COMPOSER_PILL_CLEARANCE.wide,
+    },
+    paddingBottom: {
+      xs: COMPOSER_PILL_CLEARANCE.compact,
+      md: COMPOSER_PILL_CLEARANCE.wide,
+    },
     alignItems: "center",
   },
   importPillContent: {

packages/app/src/composer/pill-styles.ts

@@ -1,9 +1,16 @@
 import { StyleSheet } from "react-native-unistyles";
 import { SPACING } from "@/styles/theme";
 
-export const COMPOSER_PILL_CLEARANCE = SPACING[4];
+export const COMPOSER_PILL_CLEARANCE = {
+  compact: SPACING[4],
+  wide: 10,
+} as const;
 export const COMPOSER_PILL_MIN_HEIGHT = 32;
 
+export function resolveComposerPillClearance(isCompact: boolean): number {
+  return isCompact ? COMPOSER_PILL_CLEARANCE.compact : COMPOSER_PILL_CLEARANCE.wide;
+}
+
 /** Shared visual contract for the compact pills immediately above the composer. */
 export const composerPillStyles = StyleSheet.create((theme) => ({
   body: {

packages/app/src/composer/tracks.test.tsx

@@ -49,7 +49,11 @@ vi.mock("@/components/ui/menu", () => ({
 }));
 
 import { ComposerTrackBar } from "./tracks";
-import { COMPOSER_PILL_CLEARANCE, composerPillStyles } from "./pill-styles";
+import {
+  COMPOSER_PILL_CLEARANCE,
+  composerPillStyles,
+  resolveComposerPillClearance,
+} from "./pill-styles";
 
 describe("ComposerTrackBar", () => {
   let root: Root | null = null;
@@ -96,6 +100,8 @@ describe("ComposerTrackBar", () => {
       borderRadius: 16,
     });
     expect(composerPillStyles.label).toMatchObject({ fontSize: 12 });
-    expect(COMPOSER_PILL_CLEARANCE).toBe(16);
+    expect(resolveComposerPillClearance(true)).toBe(16);
+    expect(resolveComposerPillClearance(false)).toBe(10);
+    expect(COMPOSER_PILL_CLEARANCE).toEqual({ compact: 16, wide: 10 });
   });
 });

packages/app/src/composer/tracks.tsx

@@ -256,7 +256,10 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[1],
   },
   pillSpacing: {
-    marginBottom: COMPOSER_PILL_CLEARANCE,
+    marginBottom: {
+      xs: COMPOSER_PILL_CLEARANCE.compact,
+      md: COMPOSER_PILL_CLEARANCE.wide,
+    },
   },
   // The rail every panel row sits on: inset from the panel edge so the fill is a rounded block
   // inside it, and tall enough that revealing an action button cannot resize the row.