Fix previous release

Author: garronej

src/SearchBar/SearchBar.tsx

@@ -6,6 +6,7 @@ import type { Equals } from "tsafe";
 import { cx } from "../tools/cx";
 import { fr } from "../fr";
 import { SearchButton } from "./SearchButton";
+import "../assets/search-bar.css";
 
 export type SearchBarProps = {
     className?: string;

src/SearchBar/SearchButton.tsx

@@ -8,8 +8,6 @@ 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;
@@ -150,12 +148,17 @@ export function SearchButton(props: SearchButtonProps) {
 
     return (
         <button
-            className={cx(
-                onClick_props === undefined && "controlled-search-bar-button",
-                fr.cx("fr-btn")
-            )}
+            className={fr.cx("fr-btn")}
             title={t("label")}
             onClick={onClick}
+            style={
+                onClick_props !== undefined
+                    ? undefined
+                    : {
+                          "position": "absolute",
+                          "right": 0
+                      }
+            }
         >
             {t("label")}
         </button>

src/assets/search-bar-button.css

@@ -0,0 +1,4 @@
+
+.fr-search-bar {
+    position: relative;
+}

src/assets/search-bar.css

@@ -3,6 +3,7 @@ import { Header } from "../dist/Header";
 import { MainNavigation } from "../dist/MainNavigation";
 import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
+import { GlobalStyles } from "tss-react";
 import placeholder_9x16ImgUrl from "./assets/placeholder.9x16.png";
 import placeholder_16x9ImgUrl from "./assets/placeholder.16x9.png";
 
@@ -207,6 +208,13 @@ function MySearchInput(props: MySearchInputProps) {
 
     return (
         <>
+            <GlobalStyles
+                styles={{
+                    ".fr-container": {
+                        "overflow": "visible"
+                    }
+                }}
+            />
             <input
                 ref={setInputElement}
                 className={className}
@@ -225,7 +233,7 @@ function MySearchInput(props: MySearchInputProps) {
             <p
                 style={{
                     "position": "absolute",
-                    "top": 120,
+                    "top": 81,
                     "left": 0
                 }}
             >

stories/Header.stories.tsx

@@ -79,7 +79,7 @@ export const WithControlledInput = getStory(
                     <p
                         style={{
                             "position": "absolute",
-                            "top": 84
+                            "top": 43
                         }}
                     >
                         Search results for: {search}