From 25865b08bf2382abd85370103ef2bb5027096cb6 Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Wed, 8 Apr 2026 16:36:21 +0200
Subject: [PATCH] FEATURE Handling reset button behaviour

---
 resources/css/components/post-grid.css | 28 +++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/resources/css/components/post-grid.css b/resources/css/components/post-grid.css
index 8babf38..b1a0eba 100644
--- a/resources/css/components/post-grid.css
+++ b/resources/css/components/post-grid.css
@@ -22,18 +22,36 @@
       &:after {
         @apply absolute  top-1/2 -translate-y-1/2;
         content: '';
-        right: 10px;
+        right: 14px;
         display: flex;
-        width: 30px;
-        height: 30px;
+        width: 36px;
+        height: 36px;
         background-image: url('../resources/img/icons/carhop-rechercher-green-circle.svg');
         background-repeat: no-repeat;
         background-position: center center;
         background-size: contain;
       }
+
+      /* Masquer la loupe si le champ n'est pas vide */
+      &:has(input:not(:placeholder-shown))::after {
+        display: none;
+      }
+
+      input:not(:placeholder-shown) ~ #reset-search {
+        display: flex;
+      }
+
+      #reset-search {
+        @apply absolute  top-1/2 -translate-y-1/2;
+        right: 14px;
+        display: none;
+        width: 36px;
+        height: 36px;
+      }
+
       input {
-        @apply w-full  !py-4 px-4 border border-primary rounded-full text-base;
-        padding-right: 33px;
+        @apply w-full  !py-4 px-5 border border-primary rounded-full text-base;
+        padding-right: 36px;
         line-height: 1.5;
         height: auto;