From 70d7c8873e5a872161eca7b8cc1e91b5d2623e08 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Sat, 28 Feb 2026 04:18:53 +0000
Subject: [PATCH] refactor: centralize UI config and inject CSS variables
 dynamically

---
 src/App.vue                               | 12 +++++++++---
 src/components/Footer.vue                 |  6 ++----
 src/components/Header.vue                 |  7 +++++--
 src/components/tools/ClipboardSniffer.vue |  2 +-
 src/components/tools/Passwords.vue        |  1 -
 src/components/tools/QrCode.vue           |  2 +-
 src/composables/useFillHeight.js          | 15 +++++----------
 src/config/ui.js                          |  6 ++++++
 8 files changed, 29 insertions(+), 22 deletions(-)
 create mode 100644 src/config/ui.js

diff --git a/src/App.vue b/src/App.vue
index 171bffc..ae0797d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,7 @@ import Footer from './components/Footer.vue'
 import Sidebar from './components/Sidebar.vue'
 import InstallPrompt from './components/InstallPrompt.vue'
 import ReloadPrompt from './components/ReloadPrompt.vue'
+import { UI_CONFIG } from './config/ui'
 
 const isSidebarOpen = ref(window.innerWidth >= 768)
 const router = useRouter()
@@ -31,6 +32,11 @@ const handleResize = () => {
 }
 
 onMounted(() => {
+  // Set global CSS variables from config
+  document.documentElement.style.setProperty('--header-height', `${UI_CONFIG.headerHeight}px`)
+  document.documentElement.style.setProperty('--footer-height', `${UI_CONFIG.footerHeight}px`)
+  document.documentElement.style.setProperty('--page-padding', `${UI_CONFIG.pagePadding}px`)
+
   window.addEventListener('resize', handleResize)
 })
 
@@ -70,14 +76,14 @@ onUnmounted(() => {
   padding: 1rem;
   width: 100%;
   max-width: 100%;
-  /* Space for fixed footer on mobile + extra margin (match top padding 2rem + footer height ~40px) */
-  padding-bottom: calc(1rem + 40px + env(safe-area-inset-bottom));
+  /* Space for fixed footer on mobile + extra margin */
+  padding-bottom: calc(1rem + var(--footer-height) + env(safe-area-inset-bottom));
 }
 
 @media (max-width: 640px) {
   .main-content {
     padding: 0.5rem;
-    padding-bottom: calc(0.5rem + 40px + env(safe-area-inset-bottom));
+    padding-bottom: calc(0.5rem + var(--footer-height) + env(safe-area-inset-bottom));
   }
 }
 
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 9e96211..749107f 100644
--- a/src/components/Footer.vue
+++ b/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) {
diff --git a/src/components/Header.vue b/src/components/Header.vue
index cf11707..6b15e15 100644
--- a/src/components/Header.vue
+++ b/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;
diff --git a/src/components/tools/ClipboardSniffer.vue b/src/components/tools/ClipboardSniffer.vue
index f751ab4..8592497 100644
--- a/src/components/tools/ClipboardSniffer.vue
+++ b/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) => {
diff --git a/src/components/tools/Passwords.vue b/src/components/tools/Passwords.vue
index dc23fbd..eda7eb4 100644
--- a/src/components/tools/Passwords.vue
+++ b/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>
diff --git a/src/components/tools/QrCode.vue b/src/components/tools/QrCode.vue
index 32d3381..87585b5 100644
--- a/src/components/tools/QrCode.vue
+++ b/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) {
diff --git a/src/composables/useFillHeight.js b/src/composables/useFillHeight.js
index 166d714..1863a4b 100644
--- a/src/composables/useFillHeight.js
+++ b/src/composables/useFillHeight.js
@@ -1,6 +1,7 @@
 import { onMounted, onUnmounted, ref, nextTick } from 'vue'
+import { UI_CONFIG } from '../config/ui'
 
-export function useFillHeight(elementRef, marginBottom = 20) {
+export function useFillHeight(elementRef, extraMargin = 0) {
   const height = ref('auto')
 
   const updateHeight = () => {
@@ -8,16 +9,10 @@ export function useFillHeight(elementRef, marginBottom = 20) {
 
     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
+    // Calculate available space: window height - element top position - footer height - padding - extra margin
+    const bottomOffset = UI_CONFIG.footerHeight + UI_CONFIG.pagePadding + extraMargin
+    const availableHeight = windowHeight - rect.top - bottomOffset
     
     // Ensure minimum height
     if (availableHeight > 100) {
diff --git a/src/config/ui.js b/src/config/ui.js
new file mode 100644
index 0000000..91f5f14
--- /dev/null
+++ b/src/config/ui.js
@@ -0,0 +1,6 @@
+
+export const UI_CONFIG = {
+  headerHeight: 64,
+  footerHeight: 50,
+  pagePadding: 16 // Single side padding (1rem)
+}