Update pedding

src/components/FeedPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <h1 v-t="'titles.feed'" class="my-4 text-center font-bold" />
+    <h1 v-t="'titles.feed'" class="my-4 text-center font-bold p-15" />
 
     <div class="flex flex-col flex-wrap gap-2 children:(flex items-center gap-1) md:flex-row md:items-center">
         <span>

src/components/ImportPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="text-center">
+    <div class="text-center p-15">
         <form>
             <div>
                 <input ref="fileSelector" type="file" @change="fileChange" />

src/components/LoginPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex justify-center">
+    <div class="flex justify-center p-15">
         <h1 v-t="'titles.login'" class="my-4 text-center font-bold" />
         <i class="i-fa6-solid:circle-info ml-2 mt-6 cursor-pointer" :title="$t('info.login_note')" />
     </div>

src/components/NavBar.vue

@@ -1,6 +1,6 @@
 <template>
     <nav class="fixed top-0 left-0 w-full flex flex-wrap items-center justify-center px-2 pb-2.5 sm:px-4 bg-dark-4">
-        <div class="flex flex-1 justify-start">
+        <div class="flex flex-1 justify-start p-2">
             <router-link class="flex items-center text-3xl font-bold font-sans" :to="homePagePath"
                 ><img
                     alt="logo"

src/components/PlaylistPage.vue

@@ -6,7 +6,7 @@
 
         <CollapsableText v-if="playlist?.description" :text="playlist.description" />
 
-        <div class="mt-1 flex justify-between <md:flex-col md:items-center">
+        <div class="mt-1 flex justify-between <md:flex-col md:items-center p-15">
             <div>
                 <router-link class="link flex items-center gap-3" :to="playlist.uploaderUrl || '/'">
                     <img loading="lazy" :src="playlist.uploaderAvatar" class="h-12 rounded-full" />

src/components/PlaylistVideos.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="scrollable" class="h-screen-sm overflow-x-scroll">
+    <div ref="scrollable" class="h-screen-sm overflow-x-scroll p-15">
         <VideoItem
             v-for="(related, index) in playlist.relatedStreams"
             :key="related.url"

src/components/PlaylistsPage.vue

@@ -1,7 +1,7 @@
 <template>
     <h2 v-t="'titles.playlists'" class="my-4 font-bold" />
 
-    <div class="mb-3 flex justify-between">
+    <div class="mb-3 flex justify-between p-15">
         <button v-t="'actions.create_playlist'" class="btn" @click="showCreatePlaylistModal = true" />
         <div class="flex">
             <button v-if="playlists.length > 0" v-t="'actions.export_to_json'" class="btn" @click="exportPlaylists" />

src/components/PreferencesPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex">
+    <div class="flex p-15">
         <button @click="$router.go(-1) || $router.push('/')">
             <i class="i-fa6-solid:chevron-left" /><span v-t="'actions.back'" class="ml-1.5" />
         </button>

src/components/RegisterPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex justify-center">
+    <div class="flex justify-center p-15">
         <h1 v-t="'titles.register'" class="my-4 text-center font-bold" />
         <i class="i-fa6-solid:circle-info ml-2 mt-6 cursor-pointer" :title="$t('info.register_note')" />
     </div>

src/components/SearchResults.vue

@@ -1,5 +1,5 @@
 <template>
-    <h1 class="my-2 text-center" v-text="$route.query.search_query" />
+    <h1 class="my-2 text-center p-15" v-text="$route.query.search_query" />
 
     <label for="ddlSearchFilters">
         <strong v-text="`${$t('actions.filter')}:`" />

src/components/SubscriptionsPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <h1 v-t="'titles.subscriptions'" class="my-4 text-center font-bold" />
+    <h1 v-t="'titles.subscriptions'" class="my-4 text-center font-bold p-15" />
     <!-- import / export section -->
     <div class="flex flex-wrap justify-between">
         <div class="flex gap-1">

src/components/TrendingPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <h1 v-t="'titles.trending'" class="my-4 text-center font-bold" />
+    <h1 v-t="'titles.trending'" class="my-4 text-center font-bold p-15" />
 
     <hr />
 

src/components/WatchVideo.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="video && isEmbed" class="absolute left-0 top-0 z-50 h-full w-full bg-black">
+    <div v-if="video && isEmbed" class="absolute left-0 z-50 h-full w-full bg-black">
         <VideoPlayer
             ref="videoPlayer"
             :video="video"