Improve text area and long form height settings

packages/bbui/src/Form/Core/TextArea.svelte

@@ -22,11 +22,23 @@
     dispatch("change", event.target.value)
     focus = false
   }
+
+  const getStyleString = (attribute, value) => {
+    if (!attribute || value == null) {
+      return ""
+    }
+    if (isNaN(value)) {
+      return `${attribute}:${value};`
+    }
+    return `${attribute}:${value}px;`
+  }
+
+  $: heightString = getStyleString("height", height)
+  $: minHeightString = getStyleString("min-height", minHeight)
 </script>
 
 <div
-  style={(height ? `height: ${height}px;` : "") +
-    (minHeight ? `min-height: ${minHeight}px` : "")}
+  style={`${heightString}${minHeightString}`}
   class="spectrum-Textfield spectrum-Textfield--multiline"
   class:is-invalid={!!error}
   class:is-disabled={disabled}

packages/bbui/src/Markdown/MarkdownEditor.svelte

@@ -3,7 +3,7 @@
   import { createEventDispatcher } from "svelte"
 
   export let value = null
-  export let height = "300px"
+  export let height = null
   export let placeholder = null
   export let id = null
   export let fullScreenOffset = 0

packages/bbui/src/Markdown/SpectrumMDE.svelte

@@ -3,7 +3,7 @@
   import "easymde/dist/easymde.min.css"
   import { onMount } from "svelte"
 
-  export let height = "300px"
+  export let height = null
   export let scroll = true
   export let easyMDEOptions = null
   export let mde = null
@@ -14,7 +14,7 @@
   let element
 
   onMount(() => {
-    height = height || "300px"
+    height = height || "200px"
     mde = new EasyMDE({
       element,
       spellChecker: false,