Fixed suggestions box size

front/src/components/SearchBox.css

@@ -0,0 +1,17 @@
+.Autocomplete-listbox {
+  max-height: calc(min(4vmax, 300px) + (1.6vmin * 20));
+  white-space: nowrap;
+  list-style-type: none;
+  padding: 0;
+}
+
+.Autocomplete-option {
+  height: calc(calc(min(4vmax, 300px)) / (10 - 1));
+  font-size: 0.7rem;
+  padding: 1.6vmin;
+}
+
+.Autocomplete-option:hover {
+  cursor: pointer;
+  background: rgb(216, 248, 249);
+}

front/src/components/SearchBox.jsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 
+import './SearchBox.css';
+
 async function getSuggestions(text) {
   const baseURL = process.env.REACT_APP_API_URL;
 
@@ -22,6 +24,16 @@ async function getSuggestions(text) {
   }
 }
 
+const ListboxComponent = React.forwardRef((props,ref) => {
+  const { children, ...other } = props;
+
+  delete other.className;
+
+  return (
+    <ul className="Autocomplete-listbox" {...other} ref={ref}>{children}</ul>
+  );
+});
+
 export default function SearchBox() {
   const [options, setOptions] = React.useState([]);
 
@@ -45,21 +57,17 @@ export default function SearchBox() {
 
       renderOption={(props, option) => {
         const term = option.term.replace(option.match, "<b>" + option.match + "</b>").replaceAll(" ", "&nbsp;");
-        return (<li {...props} dangerouslySetInnerHTML={{ __html: term }}></li>)
+
+        delete props.className;
+
+        return (<li className="Autocomplete-option" {...props} key={option.term} dangerouslySetInnerHTML={{ __html: term }}></li>)
       }}
 
       renderInput={(params) => (
         <TextField {...params} InputProps={{...params.InputProps, style: {height: "7vh", fontSize: "1.4vmax"}}}/>
       )}
 
-      ListboxProps={{
-        style: {
-          maxHeight: "min(20vmax, 300px)",
-          border: "1px solid",
-          whiteSpace: "nowrap",
-          fontSize: "min(1vmax, 12px)"
-        }
-      }}
+      ListboxComponent={ListboxComponent}
     />
   );
 }