From a706bb57bb722f862dc7297a858e39a8f5f044a6 Mon Sep 17 00:00:00 2001
From: ArabCoders <ArabCoders@users.noreply.github.com>
Date: Fri, 26 Jul 2024 00:18:34 +0000
Subject: [PATCH 1/2] Update yt-dlp to 2024.7.25

---
 Pipfile.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Pipfile.lock b/Pipfile.lock
index b75918c2..fe9abdde 100644
--- a/Pipfile.lock
+++ b/Pipfile.lock
@@ -1181,12 +1181,12 @@
         },
         "yt-dlp": {
             "hashes": [
-                "sha256:424805a112e757b141e767bc938d49db56d13d6415a92fa4cd8acadd55790be0",
-                "sha256:c5bd517a49dea1923ec8e14f51858f10fd89dfece14cb701392b480b41b2f516"
+                "sha256:7587aa25e236cf7b14bdb9378bbffff51202d901b04202be0cf62cbb56d3b52c",
+                "sha256:f44b5f33776b4f718900c670fe6e4698fb6fcd426455cd837cf25a1d6d4d9560"
             ],
             "index": "pypi",
             "markers": "python_version >= '3.8'",
-            "version": "==2024.7.16"
+            "version": "==2024.7.25"
         }
     },
     "develop": {}

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 2/2] 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" />