soroushdes/hamkadr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: search suggestions dropdown was clipped by the pill's overflow:hidden
CI/CD / CI · dotnet build (push) Failing after 14s
Details
CI/CD / Deploy · hamkadr (push) Has been skipped
Details

Browse Source 
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>
This commit is contained in:
soroush.asadi
2026-06-08 17:42:07 +03:30
parent 61afc957aa
commit eb7d0f6559
2 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/JobsMedical.Web/Pages/Shared/_Layout.cshtml
+4 -2
View File
@@ -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>
src/JobsMedical.Web/wwwroot/css/site.css
+9 -7
View File
@@ -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;