feat(search): mobile header search expands on focus; drop hero button
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 52s

Home:
- "Suchen"-Button entfernt. Die Suche feuert ohnehin debounced beim
  Tippen; der Button war ein Relikt aus dem Submit-Modell. Enter auf
  dem Input löst weiterhin einen Submit aus (geht zur /search-Seite).

Header (< 520 px):
- Sobald das Suchfeld fokussiert wird, wandert das nav-search-wrap
  via :focus-within auf position: absolute und dehnt sich bis zum
  rechten Rand (1 rem Abstand) aus. Die Action-Icons werden dabei
  vom Suchfeld überlagert (z-index 60), sodass der Anwender auf
  engen Displays deutlich mehr Platz zum Tippen hat.
- Bar-Inner bekam position: relative, damit das absolute Ausdehnen
  innerhalb der Header-Zeile greift.
This commit is contained in:
hsiegeln
2026-04-17 17:52:51 +02:00
parent d693cb422d
commit 3cd22544d3
2 changed files with 14 additions and 11 deletions

View File

@@ -248,6 +248,7 @@
align-items: center;
gap: 0.6rem;
padding: 0.6rem 1rem;
position: relative;
}
.brand {
font-size: 1.15rem;
@@ -420,5 +421,18 @@
height: 36px;
font-size: 1.05rem;
}
/* Beim Tippen auf engen Screens nach rechts ausdehnen
und die Action-Icons dahinter verschwinden lassen. */
.nav-search-wrap:focus-within {
position: absolute;
top: 0.6rem;
bottom: 0.6rem;
left: calc(1rem + 1.6rem + 0.6rem);
right: 1rem;
z-index: 60;
}
.nav-search-wrap:focus-within .nav-search input {
background: white;
}
}
</style>

View File

@@ -87,7 +87,6 @@
inputmode="search"
aria-label="Suchbegriff"
/>
<button type="submit" aria-label="Suchen">Suchen</button>
</form>
</section>
@@ -200,16 +199,6 @@
outline: 2px solid #2b6a3d;
outline-offset: 1px;
}
button {
padding: 0.9rem 1.25rem;
font-size: 1rem;
border-radius: 10px;
border: 0;
background: #2b6a3d;
color: white;
min-height: 48px;
cursor: pointer;
}
.results,
.recent {
margin-top: 1.5rem;