From d2ea9e3fc715ecb9c5c569f03e7d2755cef8cbde Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Fri, 27 Feb 2026 19:43:12 +0000
Subject: [PATCH] chore: UI spacing tweaks, desktop scrolling fix, QR title
 alignment

---
 src/App.vue                               | 10 +++++-----
 src/components/tools/ClipboardSniffer.vue | 11 ++++++++++-
 src/components/tools/QrScanner.vue        |  3 +++
 src/style.css                             | 14 ++++++--------
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8505031..171bffc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -67,17 +67,17 @@ onUnmounted(() => {
 
 .main-content {
   flex: 1;
-  padding: 2rem;
+  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(2rem + 40px + env(safe-area-inset-bottom));
+  padding-bottom: calc(1rem + 40px + env(safe-area-inset-bottom));
 }
 
 @media (max-width: 640px) {
   .main-content {
-    padding: 1rem;
-    padding-bottom: calc(1rem + 40px + env(safe-area-inset-bottom));
+    padding: 0.5rem;
+    padding-bottom: calc(0.5rem + 40px + env(safe-area-inset-bottom));
   }
 }
 
@@ -89,7 +89,7 @@ onUnmounted(() => {
   .main-content {
     overflow: visible;
     height: auto;
-    padding-bottom: 2rem;
+    padding-bottom: 1rem;
   }
 }
 
diff --git a/src/components/tools/ClipboardSniffer.vue b/src/components/tools/ClipboardSniffer.vue
index fe92305..f751ab4 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, 40)
+const { height: textareaHeight } = useFillHeight(textareaRef, 120)
 
 // Watch for clipboard updates from extension
 watch(lastClipboardText, (newText) => {
@@ -112,6 +112,7 @@ const clearText = () => {
   justify-content: center;
   gap: 1rem;
   flex-wrap: wrap;
+  flex-shrink: 0;
 }
 
 .tool-container.full-width {
@@ -126,6 +127,9 @@ const clearText = () => {
   flex-direction: column;
   height: 100%;
   gap: 1.5rem;
+  /* Override shared tool-panel scroll for this tool */
+  max-height: none;
+  overflow: hidden;
 }
 
 .tool-textarea {
@@ -154,4 +158,9 @@ const clearText = () => {
   transform: translateY(-50%);
   display: flex;
 }
+
+.result-area {
+  flex: 1;
+  display: flex;
+}
 </style>
diff --git a/src/components/tools/QrScanner.vue b/src/components/tools/QrScanner.vue
index 69df65b..c8e77f7 100644
--- a/src/components/tools/QrScanner.vue
+++ b/src/components/tools/QrScanner.vue
@@ -427,6 +427,9 @@ const isUrl = (string) => {
   justify-content: center;
   align-items: center;
   margin-bottom: 0.5rem;
+  margin-top: 0;
+  position: relative;
+  width: 100%;
 }
 
 .scanner-content {
diff --git a/src/style.css b/src/style.css
index e3f91cd..7763c6b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,8 +2,6 @@
 *, *::before, *::after {
   box-sizing: border-box;
 }
-
-@import 'tailwindcss';
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -115,13 +113,13 @@ body {
 
 @media (min-width: 768px) {
   body {
-    height: 100vh;
-    overflow: hidden;
+    min-height: 100vh;
+    overflow: auto;
   }
 
   #app {
-    height: 100vh;
-    overflow: hidden;
+    min-height: 100vh;
+    overflow: auto;
   }
 }
 
@@ -136,12 +134,12 @@ body {
   max-width: 800px;
   margin: 0 auto;
   height: 100%;
-  padding: 1rem;
+  padding: 0.5rem;
 }
 
 .tool-panel {
   width: 100%;
-  padding: 2rem;
+  padding: 1rem;
   border-radius: 16px;
   display: flex;
   flex-direction: column;