feat: unify tool styles and add dynamic height for textareas

src/composables/useFillHeight.js

@@ -0,0 +1,47 @@
+import { onMounted, onUnmounted, ref, nextTick } from 'vue'
+
+export function useFillHeight(elementRef, marginBottom = 20) {
+  const height = ref('auto')
+
+  const updateHeight = () => {
+    if (!elementRef.value) return
+
+    const rect = elementRef.value.getBoundingClientRect()
+    const windowHeight = window.innerHeight
+    // Calculate available space: window height - element top position - margin bottom
+    // We also need to account for the footer height if it's fixed or layout related
+    // The user mentioned "margin bottom from footer".
+    // If footer is in the flow, we might just want to fill the parent container?
+    // But user asked for JS resizing.
+    
+    // Let's assume we want to fill down to (windowHeight - marginBottom).
+    // This assumes the element should stretch to the bottom of the viewport.
+    
+    const availableHeight = windowHeight - rect.top - marginBottom
+    
+    // Ensure minimum height
+    if (availableHeight > 100) {
+      height.value = `${availableHeight}px`
+    }
+  }
+
+  onMounted(() => {
+    // Initial update after render
+    nextTick(() => {
+      updateHeight()
+      window.addEventListener('resize', updateHeight)
+    })
+    
+    // Also update after a short delay to ensure layout is settled (e.g. sidebar transitions)
+    setTimeout(updateHeight, 300)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateHeight)
+  })
+
+  return {
+    height,
+    updateHeight
+  }
+}