From 69e2a12a3a8ae28cb2c5df897e1f0bc2bff4dbb6 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Mon, 8 Jun 2026 23:14:25 +0330
Subject: [PATCH] Home hero search: polish mobile layout (stacked bordered
 input + full-width button)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On small screens the pill now stacks cleanly: a bordered, padded input above
a full-width جستجو button; icon hidden; chips centered. Shorter placeholder so
it never overflows.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/JobsMedical.Web/Pages/Index.cshtml   |  2 +-
 src/JobsMedical.Web/wwwroot/css/site.css | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/JobsMedical.Web/Pages/Index.cshtml b/src/JobsMedical.Web/Pages/Index.cshtml
index 27eff56..e4ea0fa 100644
--- a/src/JobsMedical.Web/Pages/Index.cshtml
+++ b/src/JobsMedical.Web/Pages/Index.cshtml
@@ -18,7 +18,7 @@
             <div class="hero-search-pill">
                 <span class="hs-ico">🔎</span>
                 <input type="search" name="Q" autocomplete="off"
-                       placeholder="جستجو کن: پرستار شب تهران، mmt، دندان‌پزشک پروانه‌دار، آماده به کار…" />
+                       placeholder="جستجو: پرستار، mmt، دندان‌پزشک…" />
                 <button type="submit" class="btn btn-accent btn-lg">جستجو</button>
             </div>
             <div class="hero-chips">
diff --git a/src/JobsMedical.Web/wwwroot/css/site.css b/src/JobsMedical.Web/wwwroot/css/site.css
index 1503366..61c3265 100644
--- a/src/JobsMedical.Web/wwwroot/css/site.css
+++ b/src/JobsMedical.Web/wwwroot/css/site.css
@@ -317,11 +317,15 @@ mark { background: #fff3bf; color: inherit; padding: 0 2px; border-radius: 3px;
 .hero-chips .hc-label { color: rgba(255,255,255,.85); }
 .hero-chips a { background: rgba(255,255,255,.16); color: #fff; padding: 5px 13px; border-radius: 999px; font-weight: 600; transition: background .15s; }
 .hero-chips a:hover { background: rgba(255,255,255,.3); }
-@media (max-width: 520px) {
-  .hero-search-pill { flex-wrap: wrap; }
-  .hero-search-pill input { flex: 1 1 100%; order: 1; }
-  .hero-search-pill .btn { flex: 1 1 100%; order: 2; }
+@media (max-width: 560px) {
+  .hero-search { margin-top: 6px; }
+  .hero-search-pill { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border-radius: 14px; }
   .hero-search-pill .hs-ico { display: none; }
+  .hero-search-pill input { width: 100%; border: 1px solid var(--line); border-radius: 10px;
+    padding: 12px 14px; font-size: 15px; background: var(--bg); }
+  .hero-search-pill .btn { width: 100%; }
+  .hero-chips { gap: 6px; }
+  .hero-chips .hc-label { flex-basis: 100%; text-align: center; margin-bottom: 2px; }
 }
 /* Big search box on the /Search page head */
 .search-hero { display: flex; gap: 8px; max-width: 640px; margin: 6px 0 4px; }