From 2b8ed166160f4c63f1f75dd8dd1463098411ace3 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 16 Dec 2023 15:06:49 -0600
Subject: [PATCH] Update:UI for playlist & rss feed modal to add more padding
 on top and bottom to prevent iOS cutoff

---
 components/modals/playlists/AddCreateModal.vue | 12 ++++++------
 components/modals/rssfeeds/RssFeedModal.vue    | 11 +++++------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/components/modals/playlists/AddCreateModal.vue b/components/modals/playlists/AddCreateModal.vue
index f829778f..80718950 100644
--- a/components/modals/playlists/AddCreateModal.vue
+++ b/components/modals/playlists/AddCreateModal.vue
@@ -1,6 +1,6 @@
 <template>
   <modals-fullscreen-modal v-model="show" :processing="processing">
-    <div class="flex items-end justify-between h-16 px-4 pb-2">
+    <div class="flex items-end justify-between h-24 px-4 pb-2">
       <h1 class="text-lg">{{ $strings.LabelAddToPlaylist }}</h1>
       <button class="flex" @click="show = false">
         <span class="material-icons">close</span>
@@ -8,13 +8,13 @@
     </div>
 
     <!-- create new playlist form -->
-    <div v-if="showPlaylistNameInput" class="w-full h-full max-h-[calc(100vh-128px)] flex items-center">
+    <div v-if="showPlaylistNameInput" class="w-full h-full max-h-[calc(100vh-176px)] flex items-center">
       <div class="w-full px-4">
         <div class="flex mb-4 items-center">
           <div class="w-9 h-9 flex items-center justify-center rounded-full cursor-pointer" @click.stop="showPlaylistNameInput = false">
             <span class="material-icons text-3xl">arrow_back</span>
           </div>
-          <p class="text-xl pl-2">{{ $strings.HeaderNewPlaylist }}</p>
+          <p class="text-xl pl-2 leading-none">{{ $strings.HeaderNewPlaylist }}</p>
           <div class="flex-grow" />
         </div>
 
@@ -26,7 +26,7 @@
     </div>
 
     <!-- playlists list -->
-    <div v-if="!showPlaylistNameInput" class="w-full overflow-y-auto overflow-x-hidden h-full max-h-[calc(100vh-128px)]">
+    <div v-if="!showPlaylistNameInput" class="w-full overflow-y-auto overflow-x-hidden h-full max-h-[calc(100vh-176px)]">
       <div class="w-full h-full" v-show="!showPlaylistNameInput">
         <template v-for="playlist in sortedPlaylists">
           <modals-playlists-playlist-row :key="playlist.id" :in-playlist="playlist.isItemIncluded" :playlist="playlist" @click="clickPlaylist" @close="show = false" />
@@ -38,8 +38,8 @@
     </div>
 
     <!-- create playlist btn -->
-    <div v-if="!showPlaylistNameInput" class="flex items-start justify-between h-16 pt-2 absolute bottom-0 left-0 w-full">
-      <ui-btn :loading="processing" color="success" class="w-full h-full flex items-center justify-center" @click.stop="createPlaylist">
+    <div v-if="!showPlaylistNameInput" class="flex items-start justify-between h-20 pt-2 absolute bottom-0 left-0 w-full">
+      <ui-btn :loading="processing" color="success" class="w-full h-14 flex items-center justify-center" @click.stop="createPlaylist">
         <p class="text-base">{{ $strings.ButtonCreateNewPlaylist }}</p>
       </ui-btn>
     </div>
diff --git a/components/modals/rssfeeds/RssFeedModal.vue b/components/modals/rssfeeds/RssFeedModal.vue
index c400d1aa..e7e23576 100644
--- a/components/modals/rssfeeds/RssFeedModal.vue
+++ b/components/modals/rssfeeds/RssFeedModal.vue
@@ -1,13 +1,13 @@
 <template>
   <modals-fullscreen-modal v-model="show" :processing="processing">
-    <div class="flex items-end justify-end h-16 pr-4 pb-2 mb-2">
+    <div class="flex items-end justify-end h-24 pr-4 pb-2">
       <!-- <h1 class="text-lg">RSS Feed</h1> -->
       <button class="flex" @click="show = false">
         <span class="material-icons">close</span>
       </button>
     </div>
 
-    <div class="w-full px-2 h-[calc(100%-138px)] overflow-y-auto">
+    <div class="w-full px-2 h-[calc(100%-176px)] overflow-y-auto">
       <div v-if="currentFeed" class="w-full">
         <div class="w-full relative">
           <h1 class="text-lg mb-4">{{ $strings.HeaderRSSFeedIsOpen }}</h1>
@@ -50,10 +50,9 @@
       </div>
     </div>
 
-    <div v-show="userIsAdminOrUp" class="flex items-center px-2 h-16">
-      <div class="flex-grow" />
-      <ui-btn v-if="currentFeed" color="error" class="w-full" @click="closeFeed">{{ $strings.ButtonCloseFeed }}</ui-btn>
-      <ui-btn v-else color="success" class="w-full" @click="openFeed">{{ $strings.ButtonOpenFeed }}</ui-btn>
+    <div v-show="userIsAdminOrUp" class="flex items-start pt-2 h-20">
+      <ui-btn v-if="currentFeed" color="error" class="w-full h-14" @click="closeFeed">{{ $strings.ButtonCloseFeed }}</ui-btn>
+      <ui-btn v-else color="success" class="w-full h-14" @click="openFeed">{{ $strings.ButtonOpenFeed }}</ui-btn>
     </div>
   </modals-fullscreen-modal>
 </template>