feat(stage-layouts): simplify mobile stage controls (#2472)

Signed-off-by: RainbowBird <git@luoling.moe>

packages/ui/src/components/form/textarea/basic-text-area.vue

@@ -44,7 +44,9 @@ function onPaste(e: ClipboardEvent) {
 // javascript - Creating a textarea with auto-resize - Stack Overflow
 // https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize
 watch(input, () => {
-  textareaHeight.value = 'auto'
+  // An explicit baseline prevents a flex parent's minimum height from
+  // stretching the textarea before scrollHeight measures its content.
+  textareaHeight.value = props.defaultHeight || 'auto'
   requestAnimationFrame(() => {
     if (!textareaRef.value)
       return
@@ -53,11 +55,7 @@ watch(input, () => {
       return
     }
 
-    // NOTICE: not sure why 4px is required but if not added, when
-    // input happened and placeholder now disappeared, the textarea will shrink
-    // a little bit and cause the input box to shake.
-    // TODO: find out the root cause and remove this magic number, or at least
-    // reference a more specific source.
+    // scrollHeight includes padding but excludes the two 2px borders.
     textareaHeight.value = `${textareaRef.value.scrollHeight + 4}px`
   })
 }, { immediate: true })
@@ -67,6 +65,7 @@ watch(input, () => {
   <textarea
     ref="textareaRef"
     v-model="input"
+    rows="1"
     :style="{ height: textareaHeight }"
     @keydown="onKeyDown"
     @paste="onPaste"