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/renderer/extensions/linearMode/MobileMenu.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import {
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  CollapsibleContent
+} from 'reka-ui'
+
+import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
+import Button from '@/components/ui/button/Button.vue'
+import Popover from '@/components/ui/Popover.vue'
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
+import { t } from '@/i18n'
+import { useCommandStore } from '@/stores/commandStore'
+</script>
+<template>
+  <CollapsibleRoot class="flex flex-col">
+    <CollapsibleTrigger as-child>
+      <Button variant="secondary" class="size-10 self-end m-4 mb-2">
+        <i class="icon-[lucide--menu] size-8" />
+      </Button>
+    </CollapsibleTrigger>
+    <CollapsibleContent class="flex gap-2 flex-col">
+      <div class="w-full border-b-2 border-border-subtle" />
+      <Popover>
+        <template #button>
+          <Button variant="secondary" size="lg" class="w-full">
+            <i class="icon-[comfy--workflow]" />
+            {{ t('Workflows') }}
+          </Button>
+        </template>
+        <WorkflowsSidebarTab class="h-300 w-[80vw]" />
+      </Popover>
+      <Button
+        variant="secondary"
+        size="lg"
+        class="w-full"
+        @click="useWorkflowTemplateSelectorDialog().show('menu')"
+      >
+        <i class="icon-[comfy--template]" />
+        {{ t('sideToolbar.templates') }}
+      </Button>
+      <Button
+        variant="secondary"
+        size="lg"
+        class="w-full"
+        @click="
+          useCommandStore().execute('Comfy.ToggleLinear', {
+            metadata: { source: 'button' }
+          })
+        "
+      >
+        <i class="icon-[lucide--log-out]" />
+        {{ t('linearMode.graphMode') }}
+      </Button>
+      <div class="w-full border-b-2 border-border-subtle" />
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>