0.3.4

package-lock.json

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

src/components/tools/Passwords.vue

@@ -75,7 +75,7 @@ const generatePasswords = () => {
     <div class="tool-panel">
       <div class="panel-header">
         <h2 class="tool-title">Bulk Passwords Generator</h2>
-        <div class="action-area">
+        <div class="action-area desktop-only">
           <button class="btn-neon generate-btn" @click="generatePasswords" v-ripple>
             Generate
           </button>
@@ -131,6 +131,12 @@ const generatePasswords = () => {
         </div>
       </div>
 
+      <div class="mobile-only" style="margin-top: 1rem; width: 100%;">
+        <button class="btn-neon generate-btn" @click="generatePasswords" v-ripple style="width: 100%;">
+          Generate
+        </button>
+      </div>
+
       <div class="result-area" :style="{ height: textareaHeight }">
         <textarea
           class="tool-textarea"
@@ -189,9 +195,10 @@ const generatePasswords = () => {
 
 .inputs-group {
   display: flex;
-  gap: 2rem;
+  gap: 1rem;
   flex: 1;
-  min-width: 300px;
+  min-width: 200px;
+  flex-wrap: wrap;
 }
 
 .input-wrapper {
@@ -199,6 +206,7 @@ const generatePasswords = () => {
   flex-direction: column;
   gap: 0.5rem;
   flex: 1;
+  min-width: 140px;
 }
 
 .checkbox-label {
@@ -351,6 +359,14 @@ const generatePasswords = () => {
   letter-spacing: 1px;
 }
 
+.desktop-only {
+  display: block;
+}
+
+.mobile-only {
+  display: none;
+}
+
 @media (max-width: 768px) {
   .options-grid {
     flex-direction: column;
@@ -370,5 +386,13 @@ const generatePasswords = () => {
   .generate-btn {
     width: 100%;
   }
+
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-only {
+    display: block !important;
+  }
 }
 </style>