CSS cleanup

src/components/ui/Sidebar.module.css

@@ -94,8 +94,7 @@
 .SettingsWrapper {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  margin-top: clamp(0.5rem, 1vw, 1.5rem);
+  gap: 0.7rem;
   margin-right: 1.5rem;
   align-self: flex-end;
 
@@ -113,6 +112,7 @@
 
 .SettingsWrapper > * {
   cursor: pointer;
+  outline: 0;
 }
 
 @media (max-width: 600px) {

src/components/widgets/Search.module.css

@@ -1,36 +1,36 @@
-.SearchWrapper {
-  height: 40px;
-}
-
 .SearchBar {
   display: flex;
   align-items: center;
-  gap: 1px;
+  gap: 2px;
   width: clamp(300px, 40vw, 600px);
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
 
 .Provider {
   flex-shrink: 0;
+  padding-inline: 20px;
+  height: 40px;
+  line-height: 40px;
+  font-family: var(--font-accent);
+  text-align: center;
   text-transform: uppercase;
   backdrop-filter: var(--bg-blur);
-  padding: 11px 20px;
-  text-align: center;
   background-color: var(--color-bg-dark);
   border-bottom: 2px solid var(--color-bg-dark);
-  font-family: var(--font-accent);
   border-top-right-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
 }
 
 .Search {
   flex-grow: 1;
-  padding: 10px 20px;
+  padding-inline: 20px;
+  height: 40px;
+  color: var(--color-text);
+
   border: 0;
   backdrop-filter: var(--bg-blur);
   background-color: var(--color-bg-dark);
   border-bottom: 2px solid var(--color-bg-dark);
-  color: var(--color-text);
   outline: 0;
 
   transition: border-color var(--transition-duration-default) var(--transition-fn);
@@ -46,6 +46,6 @@
 }
 
 .Hint {
-  font-size: 0.8rem;
+  font-size: 85%;
   color: var(--color-secondary);
 }

src/components/widgets/Search.tsx

@@ -47,7 +47,7 @@ export function Search(props: SearchProps) {
   };
 
   return (
-    <div class={style.SearchWrapper}>
+    <div>
       <div class={style.SearchBar}>
         <input
           id="search"