From a30703dc3e9d069383f2fb61be8da98d122c7898 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 13:29:36 +0200
Subject: [PATCH 1/8] feat(fully-wide-search-bar): Reduce main content
 horizontal padding on small screens

---
 src/App.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 9c55f03..26c3b1d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -49,6 +49,12 @@ watch(colorScheme, val => updateColorScheme(val))
     flex-grow: 1;
 }
 
+@media (max-width: 48rem) {
+    .main-content {
+        --main-content-padding-x: 15px;
+    }
+}
+
 #app-wrapper {
     min-height: 100vh;
     display: flex;

From 83351110b3ee069135a045416ce79b186ee6177a Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 13:35:48 +0200
Subject: [PATCH 2/8] add magnifying glass icon

---
 src/assets/icons/magnifying-glass.svg | 36 +++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/assets/icons/magnifying-glass.svg

diff --git a/src/assets/icons/magnifying-glass.svg b/src/assets/icons/magnifying-glass.svg
new file mode 100644
index 0000000..52d98e6
--- /dev/null
+++ b/src/assets/icons/magnifying-glass.svg
@@ -0,0 +1,36 @@
+<!--
+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.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path
+        stroke="currentColor"
+        stroke-width="3"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M2 22 l8 -8"
+    />
+    <circle
+        stroke="currentColor"
+        stroke-width="3"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        cx="15.5"
+        cy="8.5"
+        r="6.5"
+    />
+</svg>
\ No newline at end of file

From b0bf852e260cd48b7bcfcbfc1d05d104ce8d264b Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 13:44:03 +0200
Subject: [PATCH 3/8] replace 'search' text on the search submit button with a
 magnifying glass icon

---
 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 693096e..4a9cdd7 100644
--- a/src/features/search/components/Searchbar.vue
+++ b/src/features/search/components/Searchbar.vue
@@ -15,6 +15,8 @@ limitations under the License.
 -->
 
 <script setup>
+import Icon from '@/features/icons/components/Icon.vue';
+
 const searchQuery = defineModel();
 
 import { useRouter } from 'vue-router';
@@ -45,7 +47,9 @@ const submitSearch = function () {
                 :placeholder="t('search.searchBar.placeholder')"
                 required
                 />
-                <button type="submit" class="search-button">{{ t('search.searchBar.submit') }}</button>
+                <button type="submit" class="search-button">
+                    <Icon name="magnifying-glass" size="1.1em" />
+                </button>
             </div>
         </form>
     </div>

From ba754771f4d65008cb7823d7ae8aa7cbbe317102 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 13:45:53 +0200
Subject: [PATCH 4/8] Center magnifying glass icon on the search submit button

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

diff --git a/src/features/search/components/Searchbar.vue b/src/features/search/components/Searchbar.vue
index 4a9cdd7..0591310 100644
--- a/src/features/search/components/Searchbar.vue
+++ b/src/features/search/components/Searchbar.vue
@@ -83,6 +83,7 @@ const submitSearch = function () {
 .search-button {
     font-size: 1rem;
     height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
+    width: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
     border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y));
     border: none;
     padding: var(--submit-button-padding-y) 20px;
@@ -90,6 +91,9 @@ const submitSearch = function () {
     color: var(--white);
     cursor: pointer;
     white-space: nowrap;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .search-button:hover {

From 720fbd56971d900c90ad025d7c2dcb5beb3ef180 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 14:15:30 +0200
Subject: [PATCH 5/8] support old browsers

---
 vite.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/vite.config.js b/vite.config.js
index 68cd9a4..fa6ad06 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -21,6 +21,9 @@ import { createHtmlPlugin } from 'vite-plugin-html';
 
 // https://vite.dev/config/
 export default defineConfig({
+  build: {
+    target: 'es2020'
+  },
   plugins: [
     vue(),
     createHtmlPlugin({

From a2268ea275921df7c4fb33d58d232331b929633d Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 14:23:05 +0200
Subject: [PATCH 6/8] adapt the color of the magnifying glass search icon to
 the color scheme

---
 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 0591310..6f47c29 100644
--- a/src/features/search/components/Searchbar.vue
+++ b/src/features/search/components/Searchbar.vue
@@ -48,7 +48,7 @@ const submitSearch = function () {
                 required
                 />
                 <button type="submit" class="search-button">
-                    <Icon name="magnifying-glass" size="1.1em" />
+                    <Icon class="search-icon" name="magnifying-glass" size="1.1em" />
                 </button>
             </div>
         </form>
@@ -96,6 +96,10 @@ const submitSearch = function () {
     align-items: center;
 }
 
+.search-button .search-icon {
+    filter: invert(1);
+}
+
 .search-button:hover {
     background: var(--primary-color-l-1);
 }

From c98e8d1f964818d7a1ef940d53cca1e0624e2b14 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 14:33:55 +0200
Subject: [PATCH 7/8] add title to the search submit button

---
 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 6f47c29..729f595 100644
--- a/src/features/search/components/Searchbar.vue
+++ b/src/features/search/components/Searchbar.vue
@@ -47,7 +47,11 @@ const submitSearch = function () {
                 :placeholder="t('search.searchBar.placeholder')"
                 required
                 />
-                <button type="submit" class="search-button">
+                <button
+                    type="submit"
+                    class="search-button"
+                    :title="t('search.searchBar.submit')"
+                >
                     <Icon class="search-icon" name="magnifying-glass" size="1.1em" />
                 </button>
             </div>

From 34af4c874f9258ffd68d25852124c6255eb7f81a Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 1 Jun 2026 14:34:11 +0200
Subject: [PATCH 8/8] add ARIA label to the search submit button

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

diff --git a/src/features/search/components/Searchbar.vue b/src/features/search/components/Searchbar.vue
index 729f595..69a1fa7 100644
--- a/src/features/search/components/Searchbar.vue
+++ b/src/features/search/components/Searchbar.vue
@@ -51,6 +51,7 @@ const submitSearch = function () {
                     type="submit"
                     class="search-button"
                     :title="t('search.searchBar.submit')"
+                    :aria-label="t('search.searchBar.submit')"
                 >
                     <Icon class="search-icon" name="magnifying-glass" size="1.1em" />
                 </button>