From b163cc440f1697860f8020bb1ac57e5e2348bb00 Mon Sep 17 00:00:00 2001
From: Oleksandr Kozachuk <201152+ok2@users.noreply.github.com>
Date: Mon, 8 Jun 2026 22:18:07 +0200
Subject: [PATCH] web: stack the result row cleanly on phones

On narrow screens the result row (tag + password + len + buttons) wrapped
awkwardly. Reorder under @media: password on its own full-width line, then a
tidy meta line (result + len ........ Copy / Store).
---
 helwasm/style.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/helwasm/style.css b/helwasm/style.css
index cb4c8d8..aea95fc 100644
--- a/helwasm/style.css
+++ b/helwasm/style.css
@@ -255,5 +255,11 @@ input.mask { -webkit-text-security: disc; }
   .nav { gap: 9px; height: 60px; }
   .tagline { display: none; }
   body { font-size: 15px; }
-  .result .actions { margin-left: 0; }
+  /* result row stacks cleanly on phones: the password on its own full-width line,
+     then a tidy meta line (result + len ........ Copy / Store). */
+  .result { align-items: center; row-gap: 12px; }
+  .result .secret { order: 1; flex: 1 1 100%; font-size: clamp(15px, 5.2vw, 19px); }
+  .result .tag { order: 2; }
+  .result .len { order: 3; margin-right: auto; }
+  .result .actions { order: 4; margin-left: 0; }
 }