Improved search-bar styling

src/display/components/searchbar.css

@@ -32,12 +32,34 @@
 
 .searchbar-results {
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 10px;
+    top: 65px;
+    border-radius: 10px;
+}
+
+.searchbar-results-circle {
+    width: 15px;
+    height: 15px;
+    margin: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
 }
 
 .searchbar-result {
     cursor: pointer;
     z-index: 99;
     pointer-events: all;
+    background: white;
+    border: 1px solid gray;
+    display: flex;
+    flex-direction: row;
+    margin-top: -1px ;
+    padding-left: 10px;
+    padding-right: 10px;
+    align-items: center;
 }
 
 .searchbar-result:hover {
@@ -53,4 +75,5 @@
     border-radius: 30px;
     padding-left: 10px;
     padding-right: 5px;
+    position: relative;
 }
\ No newline at end of file

src/display/components/searchbar.tsx

@@ -23,10 +23,10 @@ function SearchBar({ minified, nodeSet, onSearch }: SearchBarProps) {
         if (isMinified) {
             setWidth(0);
             setInputText("");
-            inputField.current.value = "";
+            // inputField.current.value = "";
         } else {
             setWidth(100);
-            inputField.current.focus();
+            //inputField.current.focus();
         }
     }, [isMinified]);
 
@@ -61,40 +61,40 @@ function SearchBar({ minified, nodeSet, onSearch }: SearchBarProps) {
                 <div className={"searchbar-icon"} onClick={toggleMinified}>
                     &#128269;
                 </div>
+                <div></div>
                 <div
                     className={"searchbar-text"}
                     style={{ width: width + "%" }}
                 >
-                    <form className={"searchbar-form"} action={"#"}>
-                        <input
-                            ref={inputField}
-                            className={"searchbar-input"}
-                            type={"search"}
-                            placeholder={"Knoten suchen..."}
-                            onInput={handleInput}
-                            onBlur={toggleMinified}
-                        ></input>
-                    </form>
+                    {width > 0 && (
+                        <form className={"searchbar-form"} action={"#"}>
+                            <input
+                                ref={inputField}
+                                className={"searchbar-input"}
+                                type={"search"}
+                                placeholder={"Knoten suchen..."}
+                                onInput={handleInput}
+                                autoFocus={true}
+                                //                           onBlur={() => setMinified(true)}
+                            ></input>
+                        </form>
+                    )}
                 </div>
             </div>
-            <div
-                className={"searchbar-results"}
-                style={{
-                    height: inputText.length > 0 ? filtered.length * 30 : 0,
-                    marginBottom: filtered.length > 0 ? 10 : 0,
-                }}
-            >
-                <ul>
-                    {filtered.map((el) => (
-                        <li
-                            key={el}
-                            className={"searchbar-result"}
-                            onMouseDown={() => handleNodeClick(el)}
-                        >
-                            {el}
-                        </li>
-                    ))}
-                </ul>
+            <div className={"searchbar-results"}>
+                {filtered.map((el) => (
+                    <div
+                        key={el}
+                        className={"searchbar-result"}
+                        onMouseDown={() => handleNodeClick(el)}
+                    >
+                        <div
+                            className={"searchbar-results-circle"}
+                            style={{ backgroundColor: "red" }}
+                        ></div>
+                        <div>{el}</div>
+                    </div>
+                ))}
             </div>
         </div>
     );

src/display/display.css

@@ -32,5 +32,5 @@
     cursor: pointer;
     font-size: 30px;
     transform: rotate(-45deg);
-    margin-top: -4px;
+    margin-top: -13px;
 }
\ No newline at end of file

src/display/display.tsx

@@ -115,6 +115,7 @@ class Display extends React.Component<
                 ref={this.fullscreenRef}
             >
                 <div className={"display-icons"}>
+                    {" "}
                     <div
                         className={"display-fullscreen-button no-select"}
                         title={"Vollbild"}