refactor: centralize UI config and inject CSS variables dynamically

src/components/tools/ClipboardSniffer.vue

@@ -16,7 +16,7 @@ const {
   stopListening
 } = useExtension()
 
-const { height: textareaHeight } = useFillHeight(textareaRef, 120)
+const { height: textareaHeight } = useFillHeight(textareaRef, 40)
 
 // Watch for clipboard updates from extension
 watch(lastClipboardText, (newText) => {

src/components/tools/Passwords.vue

@@ -142,7 +142,6 @@ const generatePasswords = () => {
           class="tool-textarea"
           v-model="result"
           placeholder="Generated passwords will appear here..."
-          readonly
         ></textarea>
       </div>
     </div>

src/components/tools/QrCode.vue

@@ -12,7 +12,7 @@ const format = useLocalStorage('format', 'png', 'qr-code')
 const svgContent = ref('')
 const previewRef = ref(null)
 
-const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px margin bottom
+const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px extra margin
 
 const generateQR = async () => {
   if (!text.value) {