From 017b6237ca518d677502ed16785ec1f1327a54e0 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Wed, 27 Dec 2023 17:23:55 -0600
Subject: [PATCH] Fix:Filter dialog clear filter button overflow notch on ios
 #999

---
 components/modals/FilterModal.vue | 6 +++---
 components/modals/Modal.vue       | 2 +-
 components/ui/Btn.vue             | 8 ++++++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/modals/FilterModal.vue b/components/modals/FilterModal.vue
index ae15f882..e104dd9c 100644
--- a/components/modals/FilterModal.vue
+++ b/components/modals/FilterModal.vue
@@ -1,12 +1,12 @@
 <template>
   <modals-modal v-model="show" width="90%" height="100%">
     <template #outer>
-      <div v-show="selected !== 'all'" class="absolute top-10 left-4 z-40">
-        <ui-btn class="text-lg border-yellow-400 border-opacity-40" @click="clearSelected">{{ $strings.ButtonClearFilter }}</ui-btn>
+      <div v-show="selected !== 'all'" class="absolute top-12 left-4 z-40">
+        <ui-btn class="text-lg border-yellow-400 border-opacity-40 h-10" :padding-y="0" @click="clearSelected">{{ $strings.ButtonClearFilter }}</ui-btn>
       </div>
     </template>
     <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
-      <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-fg/20" style="max-height: 75%" @click.stop>
+      <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-fg/20 mt-8" style="max-height: 75%" @click.stop>
         <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="item in items">
             <li :key="item.value" class="text-fg select-none relative py-4 pr-9 cursor-pointer" :class="item.value === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
diff --git a/components/modals/Modal.vue b/components/modals/Modal.vue
index 353cfdae..44639f26 100644
--- a/components/modals/Modal.vue
+++ b/components/modals/Modal.vue
@@ -2,7 +2,7 @@
   <div ref="wrapper" class="modal modal-bg w-full h-full max-h-screen fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-50 opacity-0">
     <div class="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-black to-transparent opacity-90 pointer-events-none" />
 
-    <div class="absolute z-40 top-10 right-4 h-10 w-10 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">
+    <div class="absolute z-40 top-11 right-4 h-10 w-10 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">
       <span class="material-icons text-4xl">close</span>
     </div>
     <slot name="outer" />
diff --git a/components/ui/Btn.vue b/components/ui/Btn.vue
index 12ccf24c..630ed540 100644
--- a/components/ui/Btn.vue
+++ b/components/ui/Btn.vue
@@ -30,6 +30,7 @@ export default {
       default: ''
     },
     paddingX: Number,
+    paddingY: Number,
     small: Boolean,
     loading: Boolean,
     disabled: Boolean
@@ -48,14 +49,17 @@ export default {
       if (this.small) {
         list.push('text-sm')
         if (this.paddingX === undefined) list.push('px-4')
-        list.push('py-1')
+        if (this.paddingY === undefined) list.push('py-1')
       } else {
         if (this.paddingX === undefined) list.push('px-8')
-        list.push('py-2')
+        if (this.paddingY === undefined) list.push('py-2')
       }
       if (this.paddingX !== undefined) {
         list.push(`px-${this.paddingX}`)
       }
+      if (this.paddingY !== undefined) {
+        list.push(`py-${this.paddingY}`)
+      }
       if (this.disabled) {
         list.push('cursor-not-allowed')
       }