diff --git a/src/elekf/web/components/search.gleam b/src/elekf/web/components/search.gleam
index 7acb54c..7ed11ae 100644
--- a/src/elekf/web/components/search.gleam
+++ b/src/elekf/web/components/search.gleam
@@ -29,7 +29,10 @@ pub fn update(model: Model, msg) {
   case msg {
     ToggleShow -> {
       let show_search = !model.show_search
-      lustre.after_next_render(focus)
+      case show_search {
+        True -> lustre.after_next_render(focus)
+        False -> Nil
+      }
 
       Model(..model, show_search: show_search)
     }
@@ -38,37 +41,28 @@ pub fn update(model: Model, msg) {
 }
 
 pub fn view(model: Model) {
-  let input_type = case model.show_search {
-    True -> "search"
-    False -> "hidden"
-  }
-
-  div(
-    [attribute.id("search-bar")],
-    [
-      div(
-        [attribute.id("search-bar-input-wrapper")],
-        [
-          input([
-            attribute.id(search_bar_input_id),
-            attribute.class("glass-input"),
-            attribute.type_(input_type),
-            attribute.placeholder("Search"),
-            attribute.attribute("aria-label", "Search through content"),
-            event.on_input(UpdateSearch),
-          ]),
-        ],
-      ),
-      button.view(
-        "button-small",
-        [
-          attribute.attribute("aria-controls", search_bar_input_id),
-          event.on_click(ToggleShow),
-        ],
-        [icon("search", Alt("Toggle search"))],
-      ),
-    ],
-  )
+  div([attribute.id("search-bar")], [
+    lustre.if_(model.show_search, fn() {
+      div([attribute.id("search-bar-input-wrapper")], [
+        input([
+          attribute.id(search_bar_input_id),
+          attribute.class("glass-input"),
+          attribute.type_("search"),
+          attribute.placeholder("Search"),
+          attribute.attribute("aria-label", "Search through content"),
+          event.on_input(UpdateSearch),
+        ]),
+      ])
+    }),
+    button.view(
+      "button-small",
+      [
+        attribute.attribute("aria-controls", search_bar_input_id),
+        event.on_click(ToggleShow),
+      ],
+      [icon("search", Alt("Toggle search"))],
+    ),
+  ])
 }
 
 fn focus() {
diff --git a/style.css b/style.css
index 2afaa5c..d569cd2 100644
--- a/style.css
+++ b/style.css
@@ -368,13 +368,11 @@ single-album-view {
 #search-bar {
   position: absolute;
   top: calc(var(--library-top-nav-height) + var(--side-margin) * 3);
-  left: 50%;
-  transform: translateX(-50%);
-  width: calc(100vw - 20px);
+  right: var(--double-margin);
 
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: stretch;
   gap: var(--double-margin);
 }
@@ -388,11 +386,12 @@ single-album-view {
 }
 
 #search-bar-input-wrapper {
-  flex: 1 1;
+  flex: 1 0;
 }
 
 #search-bar-input-wrapper input {
-  width: 100%;
+  /* 3 double margins: left side, flex gap, right side */
+  width: calc(100vw - var(--double-margin) * 3 - var(--search-size) * 2);
   height: 100%;
 
   font-size: var(--search-size);