fix(search-results-error-message): fix width

src/features/footer/components/Footer.vue

@@ -15,8 +15,6 @@ limitations under the License.
 -->
 
 <script setup>
-import LanguageSwitchButton from '@/features/i18n/components/LanguageSwitchButton.vue';
-
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -38,10 +36,11 @@ const copyrightPeriod =
             <RouterLink to="settings" class="link">
                 {{ t('preferences.settings') }}
             </RouterLink>
-            <LanguageSwitchButton />
         </div>
         <div class="footer-segment">
-            &copy; {{ copyrightPeriod }} Seekra
+            <div class="copyright-note">
+                &copy; {{ copyrightPeriod }} Seekra
+            </div>
         </div>
     </footer>
 </template>
@@ -52,9 +51,6 @@ const copyrightPeriod =
 }
 
 .footer-segment {
-    display: flex;
-    justify-content: center;
-    gap: 32px;
     padding: var(--padding-y);
     background-color: var(--light-bg);
     border-top: 1px solid var(--border);
@@ -63,4 +59,9 @@ const copyrightPeriod =
 .global-footer a {
     color: var(--dark);
 }
+
+.copyright-note {
+    display: flex;
+    justify-content: center;
+}
 </style>

src/features/i18n/components/LanguageSwitchButton.vue

@@ -71,15 +71,7 @@ const open = function () {
             </span>
         </button>
 
-        <ul
-            v-if="isOpen"
-            ref="languageDropdown"
-            class="language-dropdown"
-            role="listbox"
-            :style="{
-                bottom: 'calc(var(--offset) + 2 * var(--trigger-padding-y) + 1em)' // easier to add auto adaption to the available space
-            }"
-        >
+        <ul v-if="isOpen" ref="languageDropdown" class="language-dropdown" role="listbox">
             <li
                 v-for="lang in SUPPORTED_LANGUAGES"
                 :key="lang"
@@ -96,7 +88,6 @@ const open = function () {
 
 <style scoped>
 .language-switch {
-    --trigger-padding-y: 4px;
     position: relative;
 }
 
@@ -107,7 +98,7 @@ const open = function () {
     background: none;
     border: 1px solid var(--border);
     border-radius: 6px;
-    padding: var(--trigger-padding-y) 10px;
+    padding: 4px 10px;
     cursor: pointer;
     color: var(--dark);
 }
@@ -127,9 +118,9 @@ const open = function () {
 }
 
 .language-dropdown {
-    --offset: 6px;
     position: absolute;
     right: 0;
+    top: calc(100% + 6px);
     background-color: var(--light-bg);
     border: 1px solid var(--border);
     border-radius: 8px;

src/features/nav/components/Navbar.vue

@@ -15,9 +15,25 @@ 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 NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
+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 || '';
+    }
+});
 </script>
 
 <template>
@@ -25,16 +41,21 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
         <RouterLink to="/" class="link button link">
             <img :src="logo" alt="Seekra" class="nav-logo" />
         </RouterLink>
-        <NavbarSearchBarWrapper class="navbar-search-bar-wrapper" />
+        <Searchbar
+            v-if="route.name === 'searchResults'"
+            class="search-bar"
+            v-model="searchQueryModel"
+            auto-submit
+        />
         <ul class="right-links">
+            <li>
+                <LanguageSwitchButton />
+            </li>
             <li>
                 <ColorSchemeButton />
             </li>
         </ul>
     </nav>
-    <div class="navbar-search-bar-wrapper-small-screens-wrapper">
-        <NavbarSearchBarWrapper class="navbar-search-bar-wrapper-small-screens" />
-    </div>
 </template>
 
 <style scoped>
@@ -68,27 +89,7 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
     height: 24px;
     width: auto;
 }
-
-.navbar-search-bar-wrapper {
-    width: 100%;
-    padding: 0 30px;
-}
-
-.navbar-search-bar-wrapper-small-screens-wrapper {
-    padding: 0 15px 15px;
-}
-
-.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;
-    }
+.search-bar {
+    width: 70%;
 }
 </style>

src/features/nav/components/NavbarSearchBarWrapper.vue

@@ -1,43 +0,0 @@
-<!--
-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.
--->
-
-<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>

src/features/search/components/Searchbar.vue

@@ -39,7 +39,7 @@ const submitSearch = function () {
 
 <template>
     <div>
-        <form @submit.prevent="submitSearch" class="search-form">
+        <form @submit.prevent="submitSearch">
             <div class="search-wrapper">
                 <input
                 v-model="searchQuery"
@@ -108,8 +108,4 @@ const submitSearch = function () {
 .search-button:hover {
     background: var(--primary-color-l-1);
 }
-
-.search-form {
-    width: 100%;
-}
 </style>