removed ugly css hack from navbar

src/components/Navbar/Navbar.tsx

@@ -1,11 +1,11 @@
 import styled from "styled-components"
 import { Link } from "react-router-dom"
 
-import Sidebar from "../Sidebar"
-import ThemeToggleButton from "./ThemeToggleButton"
-import ReadProgress from "./ReadProgress"
-import SearchButton from "./SearchButton"
 import NavLinks from "./NavLinks"
+import ThemeToggleButton from "./ThemeToggleButton"
+import SearchButton from "./SearchButton"
+import ReadProgress from "./ReadProgress"
+import Sidebar from "../Sidebar"
 
 import theming from "../../styles/theming"
 
@@ -39,10 +39,12 @@ const StyledContainer = styled.div`
 			.screen_size2} + 20px)) {
 		width: calc(${theming.size.screen_size2} - 20px);
 	}
+`
 
-	.right {
+const RightButtons = styled.div`
-		margin-left: auto;
+	display: flex;
-	}
+	height: 100%;
+	margin-left: auto;
 `
 
 const StyledImg = styled.img`
@@ -69,8 +71,12 @@ const Navbar = () => {
 				<NavLinks />
 
 				{/* right buttons */}
-				<ThemeToggleButton />
+				<RightButtons>
-				<SearchButton />
+					<ThemeToggleButton />
+					<SearchButton />
+				</RightButtons>
+
+				{/* etc */}
 				<Sidebar />
 			</StyledContainer>
 			<ReadProgress />

src/components/Navbar/ThemeToggleButton.tsx

@@ -24,7 +24,6 @@ const Navbar = () => {
 					<StyledThemeButton
 						data-tip
 						data-for="theme"
-						className="right"
 						onClick={() => setTheme(currentTheme === "dark" ? "light" : "dark")}
 					>
 						{currentTheme == "dark" && <FontAwesomeIcon icon={faMoon} />}