refactor: centralize UI config and inject CSS variables dynamically

src/components/Footer.vue

@@ -14,7 +14,8 @@ const version = __APP_VERSION__;
 <style scoped>
 .app-footer {
   width: 100%;
-  padding: 0.5rem;
+  height: var(--footer-height);
+  padding: 0 0.5rem;
   /* Background handled by glass-panel */
   border-left: none;
   border-right: none;
@@ -24,12 +25,9 @@ const version = __APP_VERSION__;
   align-items: center;
   justify-content: center;
   z-index: 10;
-  /* Remove fixed height to allow content to dictate size */
-  /* height: 30px; */
   position: fixed;
   bottom: 0;
   left: 0;
-  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
 }
 
 @media (min-width: 768px) {

src/components/Header.vue

@@ -65,7 +65,10 @@ onMounted(() => {
   /* Remove hardcoded colors and use theme variables */
   background: var(--header-bg);
   color: var(--text-color);
-  padding: 1rem;
+  height: var(--header-height);
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
   /* box-shadow handled by glass-panel class */
   position: sticky;
   top: 0;
@@ -77,7 +80,7 @@ onMounted(() => {
 }
 
 .header-content {
-  max-width: 100%;
+  width: 100%;
   padding: 0;
   margin: 0 auto;
   display: flex;

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) {