diff --git a/src/components/callout-banner/index.vue b/src/components/callout-banner/index.vue
index 042c26b..d0e0a38 100644
--- a/src/components/callout-banner/index.vue
+++ b/src/components/callout-banner/index.vue
@@ -4,7 +4,8 @@
        foreground) — warning uses the codebase's existing lifecycle-notice
        tokens, destructive uses `--destructive-soft`/`--destructive-border`
        (packages/ui/AGENTS.md § Alpha policy) — one look, not two.
-       Stacks on narrow, becomes a row at sm. When `clickable`, the whole surface
+       Action banners stack on narrow screens; clickable banners keep their
+       chevron beside the text. When `clickable`, the whole surface
        is a button that opens something (a diagnostics dialog); the trailing slot
        is then usually empty and a chevron leads the user in. -->
   <component
@@ -13,8 +14,8 @@
     data-slot="callout-banner"
     :data-tone="tone"
     :data-clickable="clickable ? '' : undefined"
-    class="flex flex-col gap-3 rounded-menu-shell border px-4 py-3 text-left sm:flex-row sm:items-center"
-    :class="[toneClass, clickable ? interactiveClass : '']"
+    class="flex gap-3 rounded-menu-shell border px-4 py-3 text-left"
+    :class="[toneClass, clickable ? [interactiveClass, 'flex-row items-center'] : 'flex-col sm:flex-row sm:items-center']"
   >
     <div class="flex min-w-0 flex-1 items-start gap-3">
       <slot name="icon">
diff --git a/src/components/settings/BackButton.vue b/src/components/settings/BackButton.vue
index b70a50d..b95b1ac 100644
--- a/src/components/settings/BackButton.vue
+++ b/src/components/settings/BackButton.vue
@@ -8,6 +8,7 @@
        pressed fill aligns with the card edge below instead of hanging into
        the outer gutter. px-4 keeps the chevron and label comfortably inset. -->
   <Button
+    data-settings-detail-back
     variant="ghost"
     :class="buttonClass"
     @click="emit('click')"
diff --git a/src/components/settings/SettingsSection.vue b/src/components/settings/SettingsSection.vue
index f898b73..50b9f5a 100644
--- a/src/components/settings/SettingsSection.vue
+++ b/src/components/settings/SettingsSection.vue
@@ -30,6 +30,7 @@ withDefaults(defineProps<{
          fighting. The nth-last-child(3) rule hands the "I'm last" treatment to
          whatever content element sits directly above the footer's hairline. -->
     <div
+      data-settings-section-card
       class="overflow-hidden rounded-menu-shell border border-border bg-card"
       :class="$slots.footer ? '[&>:nth-last-child(3)]:border-b-0' : ''"
     >
@@ -44,7 +45,10 @@ withDefaults(defineProps<{
           aria-hidden="true"
           class="mx-4 border-t border-border"
         />
-        <div class="flex items-center justify-end gap-2 px-4 py-3">
+        <div
+          data-settings-section-footer
+          class="flex items-center justify-end gap-2 px-4 py-3"
+        >
           <slot name="footer" />
         </div>
       </template>
diff --git a/src/components/settings/SwapTransition.vue b/src/components/settings/SwapTransition.vue
index 4fbb49c..a478f8c 100644
--- a/src/components/settings/SwapTransition.vue
+++ b/src/components/settings/SwapTransition.vue
@@ -82,6 +82,7 @@ function onBeforeEnter() {
        by the ancestor scroll area. -->
   <div
     ref="rootEl"
+    data-view-swap
     class="relative overflow-x-clip"
   >
     <Transition