Put the search bar button over the input when in realtime search (the user has not provider a on click) so that the input dosen't get resized

Author: garronej

src/SearchBar/SearchButton.tsx

@@ -8,6 +8,8 @@ import { is } from "tsafe/is";
 import { useConstCallback } from "../tools/powerhooks/useConstCallback";
 import { observeInputValue } from "../tools/observeInputValue";
 import { id } from "tsafe/id";
+import { cx } from "../tools/cx";
+import "../assets/search-bar-button.css";
 
 export type SearchButtonProps = {
     searchInputId: string;
@@ -147,7 +149,14 @@ export function SearchButton(props: SearchButtonProps) {
     }
 
     return (
-        <button className={fr.cx("fr-btn")} title={t("label")} onClick={onClick}>
+        <button
+            className={cx(
+                onClick_props === undefined && "controlled-search-bar-button",
+                fr.cx("fr-btn")
+            )}
+            title={t("label")}
+            onClick={onClick}
+        >
             {t("label")}
         </button>
     );

src/assets/search-bar-button.css

@@ -0,0 +1,10 @@
+.controlled-search-bar-button.fr-btn {
+    position: absolute;
+    right: 24px;
+}
+
+@media (max-width:62em) {
+    .controlled-search-bar-button.fr-btn {
+        right: 16px;
+    }
+}