Fix layout bugs

scenes/layout/components/Layout.tsx

@@ -14,15 +14,14 @@ export function Layout(p: { children: JSXElement }) {
     setMenuExpanded((expanded) => !expanded);
   }
 
-  // TODO: why logo wide?
   return (
     <>
       <header class={s.header}>
-        <Link href="/">
-          <div class={s.logoContainer}>
+        <div class={s.logoContainer}>
+          <Link href="/">
             <img class={s.logo} src="/img/layout/logo.webp" />
-          </div>
-        </Link>
+          </Link>
+        </div>
         <div class={s.searchContainer}>
           <SearchInput />
         </div>

scenes/layout/components/SearchInput.tsx

@@ -4,7 +4,11 @@ import s from "../styles/SearchInput.module.css";
 export function SearchInput() {
   return (
     <div class={s.searchInputContainer}>
-      <input class={s.searchInput} type="text" placeholder="Search" />
+      <input
+        class={`plain ${s.searchInput}`}
+        type="text"
+        placeholder="Search"
+      />
       <SearchIcon class={s.searchInputIcon} />
     </div>
   );

styles/global.css

@@ -111,7 +111,7 @@ button.outlined {
   background-color: transparent;
 }
 
-input {
+input:not(.plain) {
   height: 1rem;
   padding: var(--s-4) var(--s-3);
   background-color: var(--bg-lighter);
@@ -122,18 +122,18 @@ input {
   border: 1px solid var(--border);
 }
 
-input:focus-within {
+input:not(.plain):focus-within {
   outline: 2px solid var(--theme);
   border-color: transparent;
 }
 
-input::placeholder {
+input:not(.plain)::placeholder {
   color: var(--text-lighter);
   letter-spacing: 0.5px;
   font-weight: var(--semi-bold);
 }
 
-input.error {
+input:not(.plain).error {
   outline: 2px solid var(--theme-error);
   border-color: transparent;
 }