0.4.2

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tools-app",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.4.1",
+      "version": "0.4.2",
       "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.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

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">
@@ -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

@@ -305,6 +305,21 @@ onUnmounted(() => {
   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>