Additional linear tweaks (#8375)

- Textareas have a fixed (larger) height. This was requested by design
and I thought I fixed it while back.
  | Before | After |
  | ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/35ecfa42-4812-43b3-9844-4ef1f757ae40"
/> | <img width="360" alt="after"
src="https://github.com/user-attachments/assets/8d13e114-6524-4f3e-ae61-0d31d754466c"
/>|
- Since the typeform survey popover doesn't work well on mobile, the
button will instead open the survey in a new tab for mobile users.
- Workaround for the first linear output on local not being
automatically selected for display
- Add the linear mode toggle to the bottom left of mobile layout
<img width="634" height="90" alt="image"
src="https://github.com/user-attachments/assets/571c672c-5913-4dc9-84f9-d16c49b4a587"
/>
- Adds a hamburger menu to the mobile layout providing buttons for
opening workflows, templates, and an additional exit linear option.
- Button takes up a full line of space, so it doesn't provide much space
savings currently. May need some design iteration.
<img width="635" height="225" alt="image"
src="https://github.com/user-attachments/assets/a305e795-db0d-4265-b64b-04326a69216d"
/>

And an unrelated tweak requested by Comfy: when opening templates, the
searchbar is autofocused.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8375-Additional-linear-tweaks-2f66d73d36508172a5e7e716d0cba873)
by [Unito](https://www.unito.io)

src/components/ui/TypeformPopoverButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { whenever } from '@vueuse/core'
+import { breakpointsTailwind, useBreakpoints, whenever } from '@vueuse/core'
 import { useTemplateRef } from 'vue'
 
 import Popover from '@/components/ui/Popover.vue'
@@ -10,6 +10,7 @@ defineProps<{
 }>()
 
 const feedbackRef = useTemplateRef('feedbackRef')
+const isMobile = useBreakpoints(breakpointsTailwind).smaller('md')
 
 whenever(feedbackRef, () => {
   const scriptEl = document.createElement('script')
@@ -18,9 +19,20 @@ whenever(feedbackRef, () => {
 })
 </script>
 <template>
-  <Popover>
+  <Button
+    v-if="isMobile"
+    as="a"
+    :href="`https://form.typeform.com/to/${dataTfWidget}`"
+    target="_blank"
+    variant="inverted"
+    class="rounded-full size-12"
+    v-bind="$attrs"
+  >
+    <i class="icon-[lucide--circle-question-mark] size-6" />
+  </Button>
+  <Popover v-else>
     <template #button>
-      <Button variant="inverted" class="rounded-full size-12">
+      <Button variant="inverted" class="rounded-full size-12" v-bind="$attrs">
         <i class="icon-[lucide--circle-question-mark] size-6" />
       </Button>
     </template>