fix: allows long argument

Author: TheauW

packages/diracx-web-components/src/components/shared/SearchBar/SearchBar.tsx

@@ -160,7 +160,7 @@ export function SearchBar<T extends string>({
     () => functionUsesCurrentInput(createSuggestions),
     [createSuggestions],
   );
-  // Create a list of options based on the current tokens and data
+
   useEffect(() => {
     async function load() {
       const params: CreateSuggestionsParams = {
@@ -340,15 +340,17 @@ export function SearchBar<T extends string>({
         display: "flex",
         border: "1px solid",
         borderColor: "grey.400",
-        overflow: "auto",
+        overflow: "hidden",
         borderRadius: 1,
         ":focus-within": {
           borderColor: "primary.main",
         },
       }}
       data-testid="search-bar"
     >
-      <Box sx={{ gap: 1, display: "flex", padding: 1, width: 0.9 }}>
+      <Box
+        sx={{ gap: 1, display: "flex", padding: 1, width: 1, overflow: "auto" }}
+      >
         {tokenEquations.map((equation, index) => (
           <DisplayTokenEquation
             key={index}

packages/diracx-web-components/src/components/shared/SearchBar/SearchField.tsx

@@ -249,9 +249,6 @@ export default function SearchField({
     }, 0);
   }
 
-  // Calculate the width of the input field based on the input value length
-  const width = Math.min(Math.max(inputValue.length * 8 + 50, 150), 800);
-
   const handleDateAccepted = (newValue: string | null) => {
     if (newValue) {
       handleTokenCreation(
@@ -289,8 +286,7 @@ export default function SearchField({
       sx={{
         marginTop: "2px",
         minWidth: "180px",
-        width: "auto",
-        maxWidth: 0.9,
+        flexGrow: 1,
       }}
       disableClearable={true}
       options={suggestions.items}
@@ -309,9 +305,6 @@ export default function SearchField({
             input: {
               ...params.InputProps,
               disableUnderline: true,
-              style: {
-                width: `${width}px`,
-              },
             },
           }}
           onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {