From 7146b84010a51d9f1d68b629428e74da3cffaec3 Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Fri, 3 Jul 2026 18:03:03 +0200 Subject: [PATCH] fix: keep search input label floated when field has a value When the user typed a search term and clicked outside the input, the floating label snapped back to center and covered the typed text, making it appear as if the value had disappeared. Added :has(:not(:placeholder-shown)) so the label stays floated and padding-top is maintained whenever the input contains a value, regardless of focus state. --- css/components/search.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/css/components/search.scss b/css/components/search.scss index 4e0c838..6d5d120 100644 --- a/css/components/search.scss +++ b/css/components/search.scss @@ -100,7 +100,8 @@ } &:hover label.input-field__label, - &:focus-within label.input-field__label { + &:focus-within label.input-field__label, + &:has(.input-field__input:not(:placeholder-shown)) label.input-field__label { top: 30%; left: 0; transform: translateY(-50%); @@ -109,6 +110,7 @@ } .input-field__input { + &:not(:placeholder-shown), &:hover, &:focus, &:active {