From 190be77043f03363433fdd55a29b76e5ff81cbd3 Mon Sep 17 00:00:00 2001
From: Florens Verschelde <243601+fvsch@users.noreply.github.com>
Date: Tue, 8 Jul 2025 00:47:25 +0200
Subject: [PATCH] fix(ui): increase target size of back button (#3325)

---
 app/components/main/MainContent.vue | 13 +++++++------
 app/components/nav/NavTitle.vue     | 15 +++++++--------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/components/main/MainContent.vue b/app/components/main/MainContent.vue
index dc3ba261..0c50edc3 100644
--- a/app/components/main/MainContent.vue
+++ b/app/components/main/MainContent.vue
@@ -35,15 +35,16 @@ const containerClass = computed(() => {
         'backdrop-blur': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
       }"
     >
-      <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
-        <div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>
-          <NuxtLink
-            v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
+      <div flex justify-between gap-2 min-h-53px px5 py1 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
+        <div flex gap-2 items-center :overflow-hidden="!noOverflowHidden ? '' : false" w-full>
+          <button
+            v-if="backOnSmallScreen || back"
+            btn-text flex items-center ms="-3" p-3 xl:hidden
             :aria-label="$t('nav.back')"
             @click="$router.go(-1)"
           >
-            <div i-ri:arrow-left-line class="rtl-flip" />
-          </NuxtLink>
+            <div text-lg i-ri:arrow-left-line class="rtl-flip" />
+          </button>
           <div :truncate="!noOverflowHidden ? '' : false" flex w-full data-tauri-drag-region class="native-mac:justify-start native-mac:text-center">
             <slot name="title" />
           </div>
diff --git a/app/components/nav/NavTitle.vue b/app/components/nav/NavTitle.vue
index 74850614..630f425c 100644
--- a/app/components/nav/NavTitle.vue
+++ b/app/components/nav/NavTitle.vue
@@ -33,17 +33,16 @@ router.afterEach(() => {
         {{ $t('app_name') }} <sup text-sm italic mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
       </div>
     </NuxtLink>
-    <div
-      hidden xl:flex items-center me-8 mt-2 gap-1
-    >
-      <CommonTooltip :content="$t('nav.back')">
-        <NuxtLink
+    <div hidden xl:flex items-center me-6 mt-2 gap-1>
+      <CommonTooltip :content="$t('nav.back')" :distance="0">
+        <button
+          type="button"
           :aria-label="$t('nav.back')"
-          :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
+          btn-text p-3 :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
           @click="$router.go(-1)"
         >
-          <div text-xl i-ri:arrow-left-line class="rtl-flip" btn-text />
-        </NuxtLink>
+          <div text-xl i-ri:arrow-left-line class="rtl-flip" />
+        </button>
       </CommonTooltip>
     </div>
   </div>