0.4.4

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tools-app",
-  "version": "0.4.1",
+  "version": "0.4.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.4.1",
+      "version": "0.4.4",
       "dependencies": {
         "lucide-vue-next": "^0.575.0",
         "vue": "^3.5.25",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tools-app",
   "private": true,
-  "version": "0.4.1",
+  "version": "0.4.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -74,6 +74,13 @@ onUnmounted(() => {
   padding-bottom: calc(2rem + 40px + env(safe-area-inset-bottom));
 }
 
+@media (max-width: 640px) {
+  .main-content {
+    padding: 1rem;
+    padding-bottom: calc(1rem + 40px + env(safe-area-inset-bottom));
+  }
+}
+
 @media (min-width: 768px) {
   .app-body {
     overflow: hidden;

src/components/tools/ClipboardSniffer.vue

@@ -51,7 +51,9 @@ const clearText = () => {
     <div class="tool-panel">
       <div class="tool-header">
         <h2 class="tool-title">Clipboard Sniffer</h2>
-        <ExtensionStatus :isReady="isExtensionReady" class="extension-indicator" />
+        <div class="extension-indicator-wrapper">
+          <ExtensionStatus :isReady="isExtensionReady" />
+        </div>
       </div>
 
       <div class="controls">
@@ -67,7 +69,7 @@ const clearText = () => {
         </button>
         <button
           v-else
-          class="btn-neon active"
+          class="btn-neon danger"
           @click="stopListening"
           v-ripple
         >
@@ -145,10 +147,11 @@ const clearText = () => {
   border-color: var(--primary-accent);
 }
 
-.extension-indicator {
+.extension-indicator-wrapper {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
+  display: flex;
 }
 </style>

src/components/tools/UrlCleaner.vue

@@ -300,11 +300,35 @@ onUnmounted(() => {
   border-radius: 12px;
 }
 
+@media (max-width: 640px) {
+  .input-section {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+  }
+}
+
 .input-wrapper {
   display: flex;
   gap: 1rem;
 }
 
+@media (max-width: 640px) {
+  .input-wrapper {
+    flex-direction: column;
+  }
+
+  .watch-toggle {
+    justify-content: center;
+  }
+
+  .toggle-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
 .url-input {
   flex: 1;
   padding: 0.8rem 1rem;

src/components/tools/UrlCleanerExceptionsModal.vue

@@ -299,6 +299,12 @@ const resetToDefault = (ruleId) => {
   align-items: center;
 }
 
+@media (max-width: 640px) {
+  .modal-header {
+    padding: 0.8rem 1.2rem;
+  }
+}
+
 .modal-header h3 {
   margin: 0;
   font-size: 1.4rem;
@@ -325,6 +331,12 @@ const resetToDefault = (ruleId) => {
   overflow-y: auto;
 }
 
+@media (max-width: 640px) {
+  .modal-body {
+    padding: 1rem 1.2rem;
+  }
+}
+
 .description {
   color: var(--text-secondary);
   margin-bottom: 1.5rem;
@@ -353,6 +365,29 @@ const resetToDefault = (ruleId) => {
   margin-bottom: 0.8rem;
 }
 
+@media (max-width: 640px) {
+  .form-row {
+    flex-direction: column;
+  }
+
+  .checkbox-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  .checkbox-group {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.8rem;
+  }
+
+  .btn-neon {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
 .checkbox-row {
   align-items: center;
   justify-content: space-between;

src/components/tools/common/ExtensionStatus.vue

@@ -1,3 +1,9 @@
+<script>
+export default {
+  inheritAttrs: false
+}
+</script>
+
 <script setup>
 import { ref } from 'vue'
 import { Plug, Plus, X } from 'lucide-vue-next'
@@ -10,7 +16,7 @@ const showModal = ref(false)
 </script>
 
 <template>
-  <div class="extension-status" :class="{ 'is-ready': isReady }" @click="showModal = true" :title="isReady ? 'Extension Connected' : 'Extension Not Connected'">
+  <div class="extension-status" v-bind="$attrs" :class="{ 'is-ready': isReady }" @click="showModal = true" :title="isReady ? 'Extension Connected' : 'Extension Not Connected'">
     <Plug v-if="isReady" size="18" />
     <Plus v-else size="18" />
   </div>

src/style.css

@@ -239,6 +239,16 @@ body {
   box-shadow: var(--glass-shadow);
 }
 
+@media (max-width: 640px) {
+  .glass-panel:not(.modal-content) {
+    background: transparent;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border: none;
+    box-shadow: none;
+  }
+}
+
 .btn-neon {
   background: var(--button-bg);
   border: 1px solid var(--button-border);
@@ -279,6 +289,22 @@ button:focus {
   box-shadow: var(--button-active-shadow);
 }
 
+.btn-neon.danger {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: rgba(239, 68, 68, 0.6);
+  color: #fee2e2;
+}
+
+.btn-neon.danger:hover {
+  background: rgba(239, 68, 68, 0.3);
+  border-color: rgba(239, 68, 68, 0.85);
+  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.2);
+}
+
+:root[data-theme="light"] .btn-neon.danger {
+  color: #7f1d1d;
+}
+
 .icon-only {
   padding: 8px;
   border-radius: 50%;