From cc7e80a807616be20bf61a33204c65e47bbbd762 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Fri, 27 Feb 2026 04:43:58 +0000
Subject: [PATCH] feat: improve mobile layout for Password Generator button

---
 src/components/tools/Passwords.vue | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/tools/Passwords.vue b/src/components/tools/Passwords.vue
index a9abaf0..dc23fbd 100644
--- a/src/components/tools/Passwords.vue
+++ b/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"
@@ -353,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;
@@ -372,5 +386,13 @@ const generatePasswords = () => {
   .generate-btn {
     width: 100%;
   }
+
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-only {
+    display: block !important;
+  }
 }
 </style>