diff --git a/src/display/components/searchbar.css b/src/display/components/searchbar.css index aa0f1fdf33f940ac561de62e40f7abe7386c5c18..ebfee1b446cac5b2db0c7450955097019e9f6e9f 100644 --- a/src/display/components/searchbar.css +++ b/src/display/components/searchbar.css @@ -1,5 +1,5 @@ .searchbar { - display: flex; + display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; @@ -18,6 +18,11 @@ .searchbar-icon { cursor: pointer; font-size: 30px; + opacity: 0.7; +} + +.searchbar-form { + margin-right: 10px; } .searchbar-text { @@ -40,7 +45,8 @@ } .serach-area { - display: flex; + display: inline-flex; + width: min-content; flex-direction: column; background-color: transparent; transition: background-color 0.2s ease-in-out; diff --git a/src/display/components/searchbar.tsx b/src/display/components/searchbar.tsx index 29114b2b48d7cdcb23a03dfdab7439764181ee56..2740f0f7326d4e1f30a1249ebe174df477392aa1 100644 --- a/src/display/components/searchbar.tsx +++ b/src/display/components/searchbar.tsx @@ -65,7 +65,7 @@ function SearchBar({ minified, nodeSet, onSearch }: SearchBarProps) { className={"searchbar-text"} style={{ width: width + "%" }} > - <form action={"#"}> + <form className={"searchbar-form"} action={"#"}> <input ref={inputField} className={"searchbar-input"} diff --git a/src/display/display.css b/src/display/display.css index 46a704fa73fff103508ee707f355cc4ca2b57a68..586c8756b34558e5e6826e0b2ca1f1c99f7b8911 100644 --- a/src/display/display.css +++ b/src/display/display.css @@ -14,14 +14,17 @@ .display-icons { z-index: 99; + padding: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; - left: 15px; - top: 10px; + left: 0; + top: 0; position: absolute; - gap: 20px; + gap: 10px; + background-color: rgba(100, 100, 100, 0.2); + border-bottom-right-radius: 20px; } .display-fullscreen-button { @@ -29,4 +32,5 @@ cursor: pointer; font-size: 30px; transform: rotate(-45deg); + margin-top: -4px; } \ No newline at end of file