From d32ffee98052ca01a32d03ec728fc7334f57b82f Mon Sep 17 00:00:00 2001
From: ArabCoders <admin@arabcoders.org>
Date: Fri, 26 Jul 2024 13:39:35 +0300
Subject: [PATCH] some minor design changes

---
 frontend/src/components/Page-Footer.vue |  7 ++++---
 frontend/src/components/Page-Header.vue | 12 ++++++------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Page-Footer.vue b/frontend/src/components/Page-Footer.vue
index f00bff4e..5b1e1f84 100644
--- a/frontend/src/components/Page-Footer.vue
+++ b/frontend/src/components/Page-Footer.vue
@@ -9,9 +9,10 @@
   <div class="columns mt-3 is-mobile">
     <div class="column is-8-mobile">
       <div class="has-text-left" v-if="app_version">
-        © {{ Year }} - <a v-tooltip="'App Version: ' + app_version" href="https://github.com/ArabCoders/ytptube"
-          target="_blank">YTPTube</a>
-        - <a v-tooltip="'yt-dlp Version: ' + ytdlp_version" href="https://github.com/yt-dlp/yt-dlp">yt-dlp</a>
+        © {{ Year }} - <a href="https://github.com/ArabCoders/ytptube" target="_blank">YTPTube</a>
+        <span class="is-hidden-mobile" v-if="app_version">&nbsp;({{ app_version }})</span>
+        - <a href="https://github.com/yt-dlp/yt-dlp">yt-dlp</a>
+        <span class="is-hidden-mobile" v-if="ytdlp_version">&nbsp;({{ ytdlp_version }})</span>
       </div>
     </div>
     <div class="column is-4-mobile" v-if="started > 1">
diff --git a/frontend/src/components/Page-Header.vue b/frontend/src/components/Page-Header.vue
index 8565b1af..811b0bf8 100644
--- a/frontend/src/components/Page-Header.vue
+++ b/frontend/src/components/Page-Header.vue
@@ -8,33 +8,33 @@
     </div>
     <div class="navbar-end">
       <div class="navbar-item">
-        <button v-tooltip="'Toggle Console'" class="button is-dark has-tooltip-bottom" @click="$emit('toggleConsole')">
+        <button v-tooltip.bottom="'Toggle Console'" class="button is-dark has-tooltip-bottom" @click="$emit('toggleConsole')">
           <font-awesome-icon icon="fa-solid fa-terminal" />
         </button>
       </div>
       <div class="navbar-item">
-        <button v-tooltip="'Toggle Add Form'" class="button is-dark has-tooltip-bottom" @click="$emit('toggleForm')">
+        <button v-tooltip.bottom="'Toggle Add Form'" class="button is-dark has-tooltip-bottom" @click="$emit('toggleForm')">
           <font-awesome-icon icon="fa-solid fa-plus" />
         </button>
       </div>
       <div class="navbar-item" v-if="config.tasks.length > 0">
-        <button v-tooltip="'Toggle Tasks'" class="button is-dark has-tooltip-bottom" @click="$emit('toggleTasks')">
+        <button v-tooltip.bottom="'Toggle Tasks'" class="button is-dark has-tooltip-bottom" @click="$emit('toggleTasks')">
           <font-awesome-icon icon="fa-solid fa-tasks" />
         </button>
       </div>
       <div class="navbar-item">
-        <button v-tooltip="'Reload window'" class="button is-dark has-tooltip-bottom" @click="$emit('reload')">
+        <button v-tooltip.bottom="'Reload window'" class="button is-dark has-tooltip-bottom" @click="$emit('reload')">
           <font-awesome-icon icon="fa-solid fa-rotate-right" />
         </button>
       </div>
       <div class="navbar-item">
-        <button v-tooltip="'Switch to Light theme'" class="button is-dark has-tooltip-bottom"
+        <button v-tooltip.bottom="'Switch to Light theme'" class="button is-dark has-tooltip-bottom"
           @click="selectedTheme = 'light'" v-if="selectedTheme == 'dark'">
           <span class="icon is-small is-left has-text-warning">
             <font-awesome-icon icon="fa-solid fa-sun" />
           </span>
         </button>
-        <button v-tooltip="'Switch to Dark theme'" class="button is-dark  has-tooltip-bottom"
+        <button v-tooltip.bottom="'Switch to Dark theme'" class="button is-dark  has-tooltip-bottom"
           @click="selectedTheme = 'dark'" v-if="selectedTheme == 'light'">
           <span class="icon is-small is-left">
             <font-awesome-icon icon="fa-solid fa-moon" />