From eb7d0f6559f96bc7f0f9bb426cc915c8ae21cbb1 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Mon, 8 Jun 2026 17:42:07 +0330
Subject: [PATCH] Fix: search suggestions dropdown was clipped by the pill's
 overflow:hidden

Moved overflow:hidden onto an inner .nav-search-pill so the rounded corners
still clip the input/button, but the absolutely-positioned suggestions box
(a child of the non-clipped .nav-search) is no longer hidden. Dropdown given
a readable min-width.

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

diff --git a/src/JobsMedical.Web/Pages/Shared/_Layout.cshtml b/src/JobsMedical.Web/Pages/Shared/_Layout.cshtml
index 8cccfa6..7c543f5 100644
--- a/src/JobsMedical.Web/Pages/Shared/_Layout.cshtml
+++ b/src/JobsMedical.Web/Pages/Shared/_Layout.cshtml
@@ -118,8 +118,10 @@
                     <a asp-page="/Calendar/Index" class="@(path.StartsWith("/Calendar") ? "active" : null)">تقویم هفتگی</a>
                 </nav>
                 <form class="nav-search" method="get" action="/Search" role="search">
-                    <input type="search" name="Q" placeholder="جستجو…" aria-label="جستجو" />
-                    <button type="submit" aria-label="جستجو">🔎</button>
+                    <div class="nav-search-pill">
+                        <input type="search" name="Q" placeholder="جستجو…" aria-label="جستجو" autocomplete="off" />
+                        <button type="submit" aria-label="جستجو">🔎</button>
+                    </div>
                 </form>
                 <div class="header-actions">
                     <a class="btn btn-accent btn-sm cta-post" asp-page="/Employer/Index" data-tour="post">＋ ثبت آگهی</a>
diff --git a/src/JobsMedical.Web/wwwroot/css/site.css b/src/JobsMedical.Web/wwwroot/css/site.css
index 7e444d5..4f6283d 100644
--- a/src/JobsMedical.Web/wwwroot/css/site.css
+++ b/src/JobsMedical.Web/wwwroot/css/site.css
@@ -273,17 +273,19 @@ label { font-size: 13px; }
   background: var(--primary-soft); color: var(--primary-dark); }
 mark { background: #fff3bf; color: inherit; padding: 0 2px; border-radius: 3px; }
 
-/* Header search — single rounded pill (input + button flush), RTL-correct */
-.nav-search { position: relative; display: flex; align-items: stretch; border: 1px solid var(--line);
+/* Header search — single rounded pill (input + button flush), RTL-correct.
+   overflow:hidden lives on the INNER pill so it doesn't clip the dropdown. */
+.nav-search { position: relative; }
+.nav-search-pill { display: flex; align-items: stretch; border: 1px solid var(--line);
   border-radius: 999px; overflow: hidden; background: var(--bg); transition: border-color .15s; }
-.nav-search:focus-within { border-color: var(--primary); }
-.nav-search input { border: none; background: transparent; padding: 7px 14px; width: 150px;
+.nav-search-pill:focus-within { border-color: var(--primary); }
+.nav-search-pill input { border: none; background: transparent; padding: 7px 14px; width: 150px;
   font-family: inherit; font-size: 13px; transition: width .15s; }
-.nav-search input:focus { outline: none; width: 200px; }
-.nav-search button { border: none; background: var(--primary); color: #fff; padding: 0 14px;
+.nav-search-pill input:focus { outline: none; width: 200px; }
+.nav-search-pill button { border: none; background: var(--primary); color: #fff; padding: 0 14px;
   cursor: pointer; font-size: 14px; line-height: 1; }
 /* Autocomplete dropdown */
-.nav-search-results { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: 0;
+.nav-search-results { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 300px; max-width: 90vw;
   background: var(--surface); border: 1px solid var(--line); border-radius: 12px; z-index: 80;
   box-shadow: 0 14px 34px rgba(0,0,0,.14); overflow: hidden; max-height: 70vh; overflow-y: auto; }
 .nav-search-results a { display: flex; align-items: center; gap: 8px; padding: 9px 12px;