From 4daf550568a492c6c2f1c7f3a919ac07b319e737 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 15:16:09 +0200
Subject: [PATCH 01/11] feat(place-search-bar-below-navbar): add empty navbar
 search bar wrapper component

---
 .../nav/components/NavbarSearchBarWrapper.vue  | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/features/nav/components/NavbarSearchBarWrapper.vue

diff --git a/src/features/nav/components/NavbarSearchBarWrapper.vue b/src/features/nav/components/NavbarSearchBarWrapper.vue
new file mode 100644
index 0000000..f7ca44f
--- /dev/null
+++ b/src/features/nav/components/NavbarSearchBarWrapper.vue
@@ -0,0 +1,18 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<template>
+</template>
\ No newline at end of file

From 0df77ef6ee74ffdf3775c075ff68342685bc4545 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 15:17:32 +0200
Subject: [PATCH 02/11] feat(place-search-bar-below-navbar): integrate search
 bar in the navbar search bar wrapper component

---
 src/features/nav/components/NavbarSearchBarWrapper.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/features/nav/components/NavbarSearchBarWrapper.vue b/src/features/nav/components/NavbarSearchBarWrapper.vue
index f7ca44f..08ab85f 100644
--- a/src/features/nav/components/NavbarSearchBarWrapper.vue
+++ b/src/features/nav/components/NavbarSearchBarWrapper.vue
@@ -14,5 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
+<script setup>
+import Searchbar from '@/features/search/components/Searchbar.vue';
+</script>
+
 <template>
+    <Searchbar
+        auto-submit
+    />
 </template>
\ No newline at end of file

From 873bd748047cd055b31578a9eaff28cd0639200c Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 15:20:30 +0200
Subject: [PATCH 03/11] feat(place-search-bar-below-navbar): show search bar in
 the navbar search bar wrapper component only when the search results view is
 active

---
 src/features/nav/components/NavbarSearchBarWrapper.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/features/nav/components/NavbarSearchBarWrapper.vue b/src/features/nav/components/NavbarSearchBarWrapper.vue
index 08ab85f..7b68e1d 100644
--- a/src/features/nav/components/NavbarSearchBarWrapper.vue
+++ b/src/features/nav/components/NavbarSearchBarWrapper.vue
@@ -16,10 +16,15 @@ limitations under the License.
 
 <script setup>
 import Searchbar from '@/features/search/components/Searchbar.vue';
+
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 </script>
 
 <template>
     <Searchbar
+        v-if="route.name === 'searchResults'"
         auto-submit
     />
 </template>
\ No newline at end of file

From 9b175e39232b7de9166cac8d513d08f182ac7583 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 15:23:35 +0200
Subject: [PATCH 04/11] feat(place-search-bar-below-navbar): add search bar
 model to the navbar search bar wrapper component

---
 .../nav/components/NavbarSearchBarWrapper.vue       | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/features/nav/components/NavbarSearchBarWrapper.vue b/src/features/nav/components/NavbarSearchBarWrapper.vue
index 7b68e1d..4ac2724 100644
--- a/src/features/nav/components/NavbarSearchBarWrapper.vue
+++ b/src/features/nav/components/NavbarSearchBarWrapper.vue
@@ -17,14 +17,27 @@ limitations under the License.
 <script setup>
 import Searchbar from '@/features/search/components/Searchbar.vue';
 
+import { watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 const route = useRoute();
+const searchQueryModel = defineModel();
+
+watch(() => route.name, name => {
+    searchQueryModel.value = name === 'searchResults' ? route.query.q || '' : '';
+});
+
+watch(() => route.query.q, q => {
+    if (route.name === 'searchResults') {
+        searchQueryModel.value = q || '';
+    }
+});
 </script>
 
 <template>
     <Searchbar
         v-if="route.name === 'searchResults'"
+        v-model="searchQueryModel"
         auto-submit
     />
 </template>
\ No newline at end of file

From cabebfb9febaf86173aedcea0d5f1082fc0c3199 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 15:23:57 +0200
Subject: [PATCH 05/11] feat(place-search-bar-below-navbar): use navbar search
 bar wrapper component in the navbar

---
 src/features/nav/components/Navbar.vue | 27 ++------------------------
 1 file changed, 2 insertions(+), 25 deletions(-)

diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue
index e8a6482..d19d293 100644
--- a/src/features/nav/components/Navbar.vue
+++ b/src/features/nav/components/Navbar.vue
@@ -15,25 +15,10 @@ limitations under the License.
 -->
 
 <script setup>
-import { ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
 import ColorSchemeButton from '@/features/colorScheme/components/ColorSchemeButton.vue';
 import LanguageSwitchButton from '@/features/i18n/components/LanguageSwitchButton.vue';
 import logo from '@/assets/images/logo.svg';
-import Searchbar from '@/features/search/components/Searchbar.vue';
-
-const route = useRoute();
-const searchQueryModel = defineModel();
-
-watch(() => route.name, name => {
-    searchQueryModel.value = name === 'searchResults' ? route.query.q || '' : '';
-});
-
-watch(() => route.query.q, q => {
-    if (route.name === 'searchResults') {
-        searchQueryModel.value = q || '';
-    }
-});
+import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
 </script>
 
 <template>
@@ -41,12 +26,7 @@ watch(() => route.query.q, q => {
         <RouterLink to="/" class="link button link">
             <img :src="logo" alt="Seekra" class="nav-logo" />
         </RouterLink>
-        <Searchbar
-            v-if="route.name === 'searchResults'"
-            class="search-bar"
-            v-model="searchQueryModel"
-            auto-submit
-        />
+        <NavbarSearchBarWrapper />
         <ul class="right-links">
             <li>
                 <LanguageSwitchButton />
@@ -89,7 +69,4 @@ watch(() => route.query.q, q => {
     height: 24px;
     width: auto;
 }
-.search-bar {
-    width: 70%;
-}
 </style>

From 17570d400db3aa48133755c96cd007ea8f33b665 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 15:26:47 +0200
Subject: [PATCH 06/11] feat(place-search-bar-below-navbar): hide navbar search
 bar wrapper component on small screens

---
 src/features/nav/components/Navbar.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue
index d19d293..f7c2b85 100644
--- a/src/features/nav/components/Navbar.vue
+++ b/src/features/nav/components/Navbar.vue
@@ -26,7 +26,7 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
         <RouterLink to="/" class="link button link">
             <img :src="logo" alt="Seekra" class="nav-logo" />
         </RouterLink>
-        <NavbarSearchBarWrapper />
+        <NavbarSearchBarWrapper class="navbar-search-bar-wrapper" />
         <ul class="right-links">
             <li>
                 <LanguageSwitchButton />
@@ -69,4 +69,10 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
     height: 24px;
     width: auto;
 }
+
+@media (max-width: 48rem) {
+    .navbar-search-bar-wrapper {
+        display: none;
+    }
+}
 </style>

From dd678fb393cbd4816939c359b970f67d199f4064 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 17:39:11 +0200
Subject: [PATCH 07/11] set search form width to 100%

---
 src/features/search/components/Searchbar.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/features/search/components/Searchbar.vue b/src/features/search/components/Searchbar.vue
index 69a1fa7..75cc2dc 100644
--- a/src/features/search/components/Searchbar.vue
+++ b/src/features/search/components/Searchbar.vue
@@ -39,7 +39,7 @@ const submitSearch = function () {
 
 <template>
     <div>
-        <form @submit.prevent="submitSearch">
+        <form @submit.prevent="submitSearch" class="search-form">
             <div class="search-wrapper">
                 <input
                 v-model="searchQuery"
@@ -108,4 +108,8 @@ const submitSearch = function () {
 .search-button:hover {
     background: var(--primary-color-l-1);
 }
+
+.search-form {
+    width: 100%;
+}
 </style>
\ No newline at end of file

From 9ed87906490fa3fdb10c1319771511004afe89d3 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 17:44:06 +0200
Subject: [PATCH 08/11] feat(place-search-bar-below-navbar): show search bar
 wrapper component below the navbar on small screens

---
 src/features/nav/components/Navbar.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue
index f7c2b85..c6c348d 100644
--- a/src/features/nav/components/Navbar.vue
+++ b/src/features/nav/components/Navbar.vue
@@ -36,6 +36,7 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
             </li>
         </ul>
     </nav>
+    <NavbarSearchBarWrapper class="navbar-search-bar-wrapper-small-screens" />
 </template>
 
 <style scoped>
@@ -70,9 +71,17 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
     width: auto;
 }
 
+.navbar-search-bar-wrapper-small-screens {
+    display: none;
+}
+
 @media (max-width: 48rem) {
     .navbar-search-bar-wrapper {
         display: none;
     }
+
+    .navbar-search-bar-wrapper-small-screens {
+        display: block;
+    }
 }
 </style>

From a824ee57df96cb94537afd9683432e0094a2cfa6 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 17:45:20 +0200
Subject: [PATCH 09/11] feat(place-search-bar-below-navbar): add padding to the
 search bar wrapper below the navbar (on small screens)

---
 src/features/nav/components/Navbar.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue
index c6c348d..c2f6349 100644
--- a/src/features/nav/components/Navbar.vue
+++ b/src/features/nav/components/Navbar.vue
@@ -36,7 +36,9 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
             </li>
         </ul>
     </nav>
-    <NavbarSearchBarWrapper class="navbar-search-bar-wrapper-small-screens" />
+    <div class="navbar-search-bar-wrapper-small-screens-wrapper">
+        <NavbarSearchBarWrapper class="navbar-search-bar-wrapper-small-screens" />
+    </div>
 </template>
 
 <style scoped>
@@ -71,6 +73,10 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
     width: auto;
 }
 
+.navbar-search-bar-wrapper-small-screens-wrapper {
+    padding: 0 15px 15px;
+}
+
 .navbar-search-bar-wrapper-small-screens {
     display: none;
 }

From 6a31373b7d7f8eee369360b1dc721a09ef4bc92a Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 17:48:50 +0200
Subject: [PATCH 10/11] feat(place-search-bar-below-navbar): set width of the
 search bar wrapper in the navbar (on large screens)

---
 src/features/nav/components/Navbar.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue
index c2f6349..92cdaf1 100644
--- a/src/features/nav/components/Navbar.vue
+++ b/src/features/nav/components/Navbar.vue
@@ -73,6 +73,10 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
     width: auto;
 }
 
+.navbar-search-bar-wrapper {
+    width: 100%;
+}
+
 .navbar-search-bar-wrapper-small-screens-wrapper {
     padding: 0 15px 15px;
 }

From 47744e7be614698159c1f413dc051c28954c3b99 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 17:49:27 +0200
Subject: [PATCH 11/11] feat(place-search-bar-below-navbar): add horizontal
 padding to the search bar wrapper in the navbar (on large screens)

---
 src/features/nav/components/Navbar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue
index 92cdaf1..f59311f 100644
--- a/src/features/nav/components/Navbar.vue
+++ b/src/features/nav/components/Navbar.vue
@@ -75,6 +75,7 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
 
 .navbar-search-bar-wrapper {
     width: 100%;
+    padding: 0 30px;
 }
 
 .navbar-search-bar-wrapper-small-screens-wrapper {