chore: UI spacing tweaks, desktop scrolling fix, QR title alignment

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;
   }
 }
 

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>

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 {

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;