feat/fix: App mode QA fixes (#9530)

## Summary

Additional updates for app mode

## Changes

- **What**:
- Reposition toolbar button in app mode so it doesnt jump between modes
- Move node name to under title on input/output selection
- Change delete asset button text
- Change exit builder button icon

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9530-feat-fix-App-mode-QA-fixes-31c6d73d365081738b5cc5beaf2cbd41)
by [Unito](https://www.unito.io)

src/components/builder/BuilderMenu.vue

@@ -72,7 +72,7 @@ const menuItems = computed(() => [
   },
   {
     label: t('builderMenu.exitAppBuilder'),
-    icon: 'icon-[lucide--square-pen]',
+    icon: 'icon-[lucide--x]',
     action: onExitBuilder
   }
 ])

src/components/builder/IoItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Popover from '@/components/ui/Popover.vue'
@@ -7,6 +7,13 @@ import Button from '@/components/ui/button/Button.vue'
 
 const { t } = useI18n()
 
+const titleTooltip = ref<string | null>(null)
+const subTitleTooltip = ref<string | null>(null)
+
+function isTruncated(e: MouseEvent): boolean {
+  const el = e.currentTarget as HTMLElement
+  return el.scrollWidth > el.clientWidth
+}
 const { rename, remove } = defineProps<{
   title: string
   subTitle?: string
@@ -32,15 +39,28 @@ const entries = computed(() => {
 })
 </script>
 <template>
-  <div class="my-2 flex items-center-safe gap-2 rounded-lg p-2">
-    <div
-      class="drag-handle mr-auto inline max-w-max min-w-0 flex-[4_1_0%] truncate"
-      v-text="title"
-    />
-    <div
-      class="drag-handle inline max-w-max min-w-0 flex-[2_1_0%] truncate text-end text-muted-foreground"
-      v-text="subTitle"
-    />
+  <div
+    class="my-2 flex items-center-safe gap-2 rounded-lg p-2"
+    data-testid="builder-io-item"
+  >
+    <div class="drag-handle mr-auto flex min-w-0 flex-col gap-1">
+      <div
+        v-tooltip.left="{ value: titleTooltip, showDelay: 300 }"
+        class="drag-handle truncate text-sm"
+        data-testid="builder-io-item-title"
+        @mouseenter="titleTooltip = isTruncated($event) ? title : null"
+        v-text="title"
+      />
+      <div
+        v-tooltip.left="{ value: subTitleTooltip, showDelay: 300 }"
+        class="drag-handle truncate text-xs text-muted-foreground"
+        data-testid="builder-io-item-subtitle"
+        @mouseenter="
+          subTitleTooltip = isTruncated($event) ? (subTitle ?? null) : null
+        "
+        v-text="subTitle"
+      />
+    </div>
     <Popover :entries>
       <template #button>
         <Button variant="muted-textonly">