From b457535ed297f139460a6b98e02063dcc8079b9b Mon Sep 17 00:00:00 2001
From: dragos-efy <contact@efy.ooo>
Date: Tue, 12 Sep 2023 00:24:07 +0300
Subject: [PATCH] Fix Visual Issues

---
 src/App.vue                             |  5 +++
 src/components/ChannelItem.vue          | 44 +++++++++---------
 src/components/CollapsableText.vue      | 12 +++--
 src/components/ConfirmModal.vue         |  5 ++-
 src/components/LoadingIndicatorPage.vue |  2 +-
 src/components/LoginModal.vue           | 12 ++---
 src/components/ModalComponent.vue       | 16 +++----
 src/components/NavBar.vue               |  3 +-
 src/components/PlaylistAddModal.vue     |  6 +--
 src/components/PlaylistItem.vue         | 13 +++---
 src/components/PlaylistPage.vue         | 59 ++++++++++++++++++-------
 src/components/PlaylistsPage.vue        | 24 ++++++----
 src/components/ShareModal.vue           |  8 ++--
 src/components/SubscriptionsPage.vue    |  1 -
 src/components/VideoItem.vue            | 26 +++++++++--
 src/components/WatchVideo.vue           | 16 +++++--
 16 files changed, 162 insertions(+), 90 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a3db2509..eb45f3aa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -66,7 +66,9 @@ video {
     -webkit-box-orient: vertical;
     padding: 0 10rem 5rem 10rem;
     line-height: 22rem;
+    max-height: 43rem;
     overflow: hidden;
+    word-break: break-word;
 }
 .pp-video-card-buttons {
     display: flex;
@@ -89,6 +91,8 @@ video {
     -webkit-text-fill-color: var(--efy_text2);
     border: 0;
     padding: 6rem 10rem;
+}
+.pp-video-card-buttons :is(.pp-color, .btn, button) {
     height: 35rem;
 }
 .pp-video-card-channel > .pp-text {
@@ -119,6 +123,7 @@ video {
     background: transparent;
     margin: var(--efy_gap0) 0 var(--efy_gap0) var(--efy_gap0);
     width: fit-content;
+    border-radius: var(--efy_radius);
 }
 .pp-video-card-channel > a {
     height: 36rem;
diff --git a/src/components/ChannelItem.vue b/src/components/ChannelItem.vue
index 3b2f81ef..d5983c61 100644
--- a/src/components/ChannelItem.vue
+++ b/src/components/ChannelItem.vue
@@ -1,29 +1,27 @@
 <template>
-    <div class="flex flex-col flex-justify-between">
-        <router-link :to="props.item.url">
-            <div class="my-4 flex justify-center">
-                <img class="aspect-square w-[50%] rounded-full" :src="props.item.thumbnail" loading="lazy" />
-            </div>
-            <p>
-                <span v-text="props.item.name" />
+    <div class="flex flex-col efy_trans_filter efy_shadow_trans">
+        <router-link
+            :to="props.item.url"
+            class="flex items-center p-[10rem] gap-[10rem]"
+            style="border-bottom: var(--efy_border)"
+        >
+            <img
+                class="efy_shadow_trans"
+                style="border-radius: var(--efy_radius); width: 40rem; aspect-ratio: 1"
+                :src="props.item.thumbnail"
+                loading="lazy"
+                width="40"
+                height="40"
+            />
+            <div class="flex items-center overflow-hidden pp-text">
+                <p v-text="props.item.name" class="pp-video-card-title p-0!" />
                 <font-awesome-icon v-if="props.item.verified" class="ml-1.5" icon="check" />
-            </p>
+            </div>
         </router-link>
-        <p v-if="props.item.description" v-text="props.item.description" />
-        <router-link v-if="props.item.uploaderUrl" class="link" :to="props.item.uploaderUrl">
-            <p>
-                <span v-text="props.item.uploader" />
-                <font-awesome-icon v-if="props.item.uploaderVerified" class="ml-1.5" icon="check" />
-            </p>
-        </router-link>
-
-        <a v-if="props.item.uploaderName" class="link" v-text="props.item.uploaderName" />
-        <template v-if="props.item.videos >= 0">
-            <br v-if="props.item.uploaderName" />
-            <strong v-text="`${props.item.videos} ${$t('video.videos')}`" />
-        </template>
-
-        <br />
+        <div style="padding: 10rem">
+            <p v-if="props.item.description" v-text="props.item.description" />
+            <div v-if="props.item.videos >= 0" v-text="`${props.item.videos} ${$t('video.videos')}`" />
+        </div>
     </div>
 </template>
 
diff --git a/src/components/CollapsableText.vue b/src/components/CollapsableText.vue
index 39a07886..77aa54bf 100644
--- a/src/components/CollapsableText.vue
+++ b/src/components/CollapsableText.vue
@@ -1,5 +1,5 @@
 <template v-if="text">
-    <div class="mx-1 whitespace-pre-wrap py-2">
+    <div class="whitespace-pre-wrap">
         <!-- eslint-disable-next-line vue/no-v-html -->
         <span v-if="showFullText" v-html="fullText()" />
         <!-- eslint-disable-next-line vue/no-v-html -->
@@ -7,10 +7,16 @@
         <span v-if="text.length > 100 && !showFullText">...</span>
         <button
             v-if="text.length > 100"
-            class="block whitespace-normal font-semibold text-neutral-500 hover:underline"
+            style="
+                margin: 0 0 0 10rem;
+                background: var(--efy_bg1);
+                -webkit-text-fill-color: var(--efy_text);
+                padding: 5rem 8reml;
+            "
+            class="efy_shadow_trans efy_shadow_button_off efy_button_text_off"
             @click="showFullText = !showFullText"
         >
-            [{{ showFullText ? $t("actions.show_less") : $t("actions.show_more") }}]
+            {{ showFullText ? $t("actions.show_less") : $t("actions.show_more") }}
         </button>
     </div>
 </template>
diff --git a/src/components/ConfirmModal.vue b/src/components/ConfirmModal.vue
index 73fc56df..347f87c9 100644
--- a/src/components/ConfirmModal.vue
+++ b/src/components/ConfirmModal.vue
@@ -1,8 +1,9 @@
 <template>
     <ModalComponent @close="$emit('close')">
         <div>
-            <h3 class="text-xl" v-text="message" />
-            <div class="ml-auto mt-8 w-min flex gap-2">
+            <h5 v-text="message" />
+            <hr />
+            <div class="w-min flex" style="gap: var(--efy_gap0)">
                 <button v-t="'actions.cancel'" class="btn" @click="$emit('close')" />
                 <button v-t="'actions.okay'" class="btn" @click="$emit('confirm')" />
             </div>
diff --git a/src/components/LoadingIndicatorPage.vue b/src/components/LoadingIndicatorPage.vue
index 5dec591b..628ee6dc 100644
--- a/src/components/LoadingIndicatorPage.vue
+++ b/src/components/LoadingIndicatorPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="!showContent" class="min-h-[75vh] w-full flex items-center justify-center">
+    <div v-if="!showContent" class="min-h-[75vh] min-w-[75vw] w-full flex items-center justify-center">
         <span id="spinner" />
     </div>
     <div v-else>
diff --git a/src/components/LoginModal.vue b/src/components/LoginModal.vue
index 589c7bba..0d8c9db5 100644
--- a/src/components/LoginModal.vue
+++ b/src/components/LoginModal.vue
@@ -1,13 +1,13 @@
 <template>
     <ModalComponent>
-        <h3 v-t="'titles.account'" class="font-bold my-4" />
+        <h5 v-t="'titles.account'" class="font-bold my-4" />
         <hr />
         <div class="text-center">
             <form class="children:pb-3">
                 <div>
                     <input
                         v-model="username"
-                        class="input w-full"
+                        class="m-0"
                         type="text"
                         autocomplete="username"
                         :placeholder="$t('login.username')"
@@ -18,7 +18,7 @@
                 <div>
                     <input
                         v-model="password"
-                        class="input w-full"
+                        class="m-0"
                         type="password"
                         autocomplete="password"
                         :placeholder="$t('login.password')"
@@ -26,9 +26,9 @@
                         v-on:keyup.enter="login"
                     />
                 </div>
-                <div class="flex justify-end">
-                    <a class="btn mr-2 cursor-pointer" @click="register" v-t="'titles.register'" />
-                    <a class="btn cursor-pointer" @click="login" v-t="'titles.login'" />
+                <div class="flex justify-end p-0!" style="gap: var(--efy_gap0)">
+                    <a role="button" class="m-0!" @click="register" v-t="'titles.register'" />
+                    <a role="button" class="m-0!" @click="login" v-t="'titles.login'" />
                 </div>
             </form>
         </div>
diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index 9d3d3713..1b965fb9 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -2,7 +2,9 @@
     <div class="modal">
         <div @click="handleClick">
             <div class="modal-container">
-                <button @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
+                <button @click="$emit('close')" class="pp-color btn m-0">
+                    <font-awesome-icon icon="xmark" />
+                </button>
                 <slot></slot>
             </div>
         </div>
@@ -35,21 +37,15 @@ export default {
 
 <style>
 .modal {
-    @apply fixed z-50 top-0 left-0 w-full h-full bg-gray bg-opacity-80 transition-opacity table;
+    @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
 }
-.dark .modal {
-    @apply bg-dark-900 bg-opacity-80;
-}
-
 .modal > div {
     @apply table-cell align-middle;
 }
-
 .modal-container {
-    @apply w-100% m-auto max-w-[410rem] relative;
+    @apply w-100% m-auto max-w-[421rem] relative;
 }
-
 .modal-container > button {
-    @apply absolute right-50 top-30;
+    @apply absolute right-[12rem] top-[15rem];
 }
 </style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index a42b0e57..6c8e947f 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -96,7 +96,7 @@
     </nav>
 
     <!-- search suggestions for mobile devices -->
-    <div class="w-{full - 4} md:hidden mx-2" style="position: relative">
+    <div class="w-{full - 4} md:hidden" style="position: relative">
         <input
             v-model="searchText"
             type="text"
@@ -107,6 +107,7 @@
             @keypress="onKeyPress"
             @focus="onInputFocus"
             @blur="onInputBlur"
+            style="margin: 15rem 0 0 0"
         />
         <span v-if="searchText" class="delete-search" @click="searchText = ''">⨉</span>
     </div>
diff --git a/src/components/PlaylistAddModal.vue b/src/components/PlaylistAddModal.vue
index edb83931..04268466 100644
--- a/src/components/PlaylistAddModal.vue
+++ b/src/components/PlaylistAddModal.vue
@@ -4,12 +4,12 @@
         <select v-model="selectedPlaylist" class="select w-full mb-2">
             <option v-for="playlist in playlists" :key="playlist.id" :value="playlist.id" v-text="playlist.name" />
         </select>
-        <div class="flex justify-end">
-            <button ref="addButton" v-t="'actions.create_playlist'" class="btn" @click="onCreatePlaylist" />
+        <div class="flex justify-end" style="gap: var(--efy_gap0)">
+            <button ref="addButton" v-t="'actions.create_playlist'" class="btn pp-color" @click="onCreatePlaylist" />
             <button
                 ref="addButton"
                 v-t="'actions.add_to_playlist'"
-                class="btn"
+                class="btn pp-color"
                 @click="handleClick(selectedPlaylist)"
             />
         </div>
diff --git a/src/components/PlaylistItem.vue b/src/components/PlaylistItem.vue
index e4e2881b..3d25ff04 100644
--- a/src/components/PlaylistItem.vue
+++ b/src/components/PlaylistItem.vue
@@ -4,10 +4,9 @@
             <div class="relative">
                 <img class="thumbnail" :src="props.item.thumbnail" loading="lazy" />
             </div>
-            <p>
-                <span v-text="props.item.name" class="pp-video-card-title" />
-                <font-awesome-icon v-if="props.item.verified" class="ml-1.5" icon="check" />
-            </p>
+            <div class="flex items-center h-[44rem] overflow-hidden">
+                <p v-text="props.item.name" class="pp-video-card-title" />
+            </div>
         </router-link>
         <p v-if="props.item.description" v-text="props.item.description" />
 
@@ -29,7 +28,11 @@
                     <font-awesome-icon class="ml-1.5" v-if="item.uploaderVerified" icon="check" />
                 </div>
             </router-link>
-            <a v-else-if="props.item.uploaderName" class="pp-video-card-channel" v-text="props.item.uploaderName" />
+            <a
+                v-else-if="props.item.uploaderName"
+                class="pp-video-card-channel efy_shadow_trans"
+                v-text="props.item.uploaderName"
+            />
         </div>
     </div>
 </template>
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index 2ff4b130..61e1a9e6 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -2,34 +2,52 @@
     <ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
 
     <LoadingIndicatorPage v-show="!playlist?.error" :show-content="playlist">
-        <h5 class="mb-1 ml-1" v-text="playlist.name" />
+        <hr />
+        <h5 class="mb-[10rem]" v-text="playlist.name" />
 
         <CollapsableText v-if="playlist?.description" :text="playlist.description" />
+        <hr />
 
-        <div class="mt-1 flex items-center justify-between">
-            <div>
-                <router-link class="link" :to="playlist.uploaderUrl || '/'">
-                    <img :src="playlist.uploaderAvatar" loading="lazy" />
-                    <strong v-text="playlist.uploader" />
+        <div class="flex items-center justify-between">
+            <div class="pp-video-card-buttons m-0!">
+                <router-link
+                    :to="playlist.uploaderUrl || '/'"
+                    class="pp-video-card-channel p-0!"
+                    style="background: transparent; border: 0"
+                >
+                    <img
+                        v-if="playlist.uploaderAvatar"
+                        :src="playlist.uploaderAvatar"
+                        loading="lazy"
+                        width="36"
+                        height="36"
+                        class="w-36rem h-36rem efy_shadow_trans"
+                    />
+                    <button class="pp-text efy_shadow_trans efy_shadow_button_off efy_button_text_off">
+                        <span v-text="playlist.uploader" />
+                        <font-awesome-icon class="ml-1.5" v-if="playlist.uploaderVerified" icon="check" />
+                    </button>
                 </router-link>
+                <button
+                    v-text="`${playlist.videos} ${$t('video.videos')}`"
+                    class="efy_button_text_off efy_shadow_trans efy_shadow_button_off"
+                />
             </div>
-            <div>
-                <strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
-                <br />
-                <button v-if="!isPipedPlaylist" class="btn mx-1" @click="bookmarkPlaylist">
-                    {{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`)
-                    }}<font-awesome-icon class="ml-3" icon="bookmark" />
+            <div class="pp-flex-bookmarks">
+                <button v-if="!isPipedPlaylist" class="btn" @click="bookmarkPlaylist">
+                    <font-awesome-icon class="mr-[5rem]" icon="bookmark" />
+                    {{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`) }}
                 </button>
                 <button v-if="authenticated && !isPipedPlaylist" class="btn mr-1 ml-2" @click="clonePlaylist">
-                    {{ $t("actions.clone_playlist") }}<font-awesome-icon class="ml-3" icon="clone" />
+                    <font-awesome-icon class="mr-[5rem]" icon="clone" />{{ $t("actions.clone_playlist") }}
                 </button>
                 <button class="btn mr-1" @click="downloadPlaylistAsTxt">
                     {{ $t("actions.download_as_txt") }}
                 </button>
-                <a class="btn" :href="getRssUrl">
+                <a :href="getRssUrl" role="button" class="btn pp-square">
                     <font-awesome-icon icon="rss" />
                 </a>
-                <WatchOnButton :link="`https://www.youtube.com/playlist?list=${$route.query.list}`" />
+                <WatchOnButton :link="`https://www.youtube.com/playlist?list=${$route.query.list}`" class="pp-square" />
             </div>
         </div>
 
@@ -51,6 +69,17 @@
     </LoadingIndicatorPage>
 </template>
 
+<style>
+.pp-flex-bookmarks {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--efy_gap0);
+}
+.pp-flex-bookmarks > * {
+    margin: 0;
+}
+</style>
+
 <script>
 import ErrorHandler from "./ErrorHandler.vue";
 import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
diff --git a/src/components/PlaylistsPage.vue b/src/components/PlaylistsPage.vue
index b5c585a9..c6f4fac8 100644
--- a/src/components/PlaylistsPage.vue
+++ b/src/components/PlaylistsPage.vue
@@ -1,6 +1,6 @@
 <template>
     <hr />
-    <div class="flex justify-between items-center">
+    <div class="flex flex-wrap justify-between items-center" style="gap: var(--efy_gap0)">
         <button
             v-t="'actions.create_playlist'"
             style="height: var(--efy_ratio_width); margin: 0"
@@ -27,7 +27,7 @@
     <hr />
 
     <div class="video-grid">
-        <div v-for="playlist in playlists" :key="playlist.id" class="video-card efy_trans_filter">
+        <div v-for="playlist in playlists" :key="playlist.id" class="video-card efy_trans_filter efy_shadow_trans">
             <router-link :to="`/playlist?list=${playlist.id}`">
                 <img class="thumbnail" :src="playlist.thumbnail" alt="thumbnail" />
                 <p
@@ -38,7 +38,10 @@
                 />
             </router-link>
             <div class="pp-video-card-buttons flex gap-15rem children:m-0" style="flex-wrap: wrap">
-                <button v-text="`${playlist.videos} ${$t('video.videos')}`" class="thumbnail-overlay thumbnail-right" />
+                <button
+                    v-text="`${playlist.videos} ${$t('video.videos')}`"
+                    class="efy_shadow_trans efy_shadow_button_off efy_button_text_off"
+                />
                 <button
                     v-t="'actions.edit_playlist'"
                     class="pp-color h-auto"
@@ -76,14 +79,14 @@
             />
         </div>
     </div>
-    <hr />
 
+    <hr />
     <h5 v-if="bookmarks" v-t="'titles.bookmarks'" class="mb-[15rem]" />
     <div v-if="bookmarks" class="video-grid">
         <div
             v-for="(playlist, index) in bookmarks"
             :key="playlist.playlistId"
-            class="pp-bookmark video-card efy_trans_filter"
+            class="pp-bookmark video-card efy_trans_filter efy_shadow_trans"
         >
             <router-link :to="`/playlist?list=${playlist.playlistId}`">
                 <img class="thumbnail" :src="playlist.thumbnail" alt="thumbnail" />
@@ -92,14 +95,17 @@
                 </div>
             </router-link>
             <div class="pp-video-card-buttons flex gap-15rem">
-                <button @click.prevent="removeBookmark(index)">
-                    <font-awesome-icon class="ml-3" icon="bookmark" />
+                <button @click.prevent="removeBookmark(index)" class="btn pp-color aspect-square">
+                    <font-awesome-icon icon="bookmark" />
                 </button>
-                <button v-text="`${playlist.videos} ${$t('video.videos')}`" class="thumbnail-overlay" />
+                <button
+                    v-text="`${playlist.videos} ${$t('video.videos')}`"
+                    class="efy_shadow_trans efy_shadow_button_off efy_button_text_off"
+                />
             </div>
             <a :href="playlist.uploaderUrl" class="pp-video-card-channel">
                 <img class="w-36rem h-36rem efy_shadow_trans" :src="playlist.uploaderAvatar" width="36" height="36" />
-                <div class="pp-text efy_shadow_trans efy_shadow_button_off">
+                <div class="pp-text efy_shadow_trans">
                     <span v-text="playlist.uploader" />
                 </div>
             </a>
diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
index 6dcef742..3827743a 100644
--- a/src/components/ShareModal.vue
+++ b/src/components/ShareModal.vue
@@ -1,6 +1,6 @@
 <template>
     <ModalComponent>
-        <h4 v-t="'actions.share'" />
+        <h5 v-t="'actions.share'" />
         <div class="flex justify-between mt-2 mb-2">
             <label v-t="'actions.piped_link'" />
             <input v-model="pipedLink" type="checkbox" @change="onChange" />
@@ -15,13 +15,13 @@
         </div>
         <div v-if="withTimeCode" class="flex justify-between mt-2" style="align-items: center">
             <label v-t="'actions.time_code'" />
-            <input v-model="timeStamp" class="input w-12" type="text" @change="onChange" />
+            <input v-model="timeStamp" style="max-width: 100rem" type="number" @change="onChange" />
         </div>
         <a :href="generatedLink" target="_blank">
             <h6 class="mb-2 mt-2" v-text="generatedLink" />
         </a>
-        <QrCode v-if="showQrCode" :text="generatedLink" />
-        <div class="mt-4 flex justify-end">
+        <QrCode v-if="showQrCode" :text="generatedLink" class="mb-[10rem]" />
+        <div class="flex flex-wrap justify-end" style="gap: var(--efy_gap0)">
             <button v-t="'actions.generate_qrcode'" class="btn" @click="showQrCode = !showQrCode" />
             <button v-t="'actions.follow_link'" class="btn ml-3" @click="followLink()" />
             <button v-t="'actions.copy_link'" class="btn ml-3" @click="copyLink()" />
diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index e30aee30..1e778862 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -114,7 +114,6 @@
     width: 100%;
 }
 .selected {
-    border: 0.1rem outset red;
 }
 .m0c {
     gap: var(--efy_gap0);
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 194f93da..27fd9104 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -20,11 +20,27 @@
                 loading="lazy"
             />
             <!-- progress bar -->
-            <div class="relative h-1 w-full">
+            <div
+                v-if="item.watched && item.duration > 0"
+                class="relative h-1 w-full"
+                style="
+                    height: 4rem;
+                    background: rgba(255, 255, 255, 0.067);
+                    bottom: 8px;
+                    border-radius: 0px;
+                    box-shadow: 0 -5rem 10rem #0005;
+                    backdrop-filter: blur(24px);
+                "
+            >
                 <div
-                    v-if="item.watched && item.duration > 0"
-                    class="absolute bottom-0 left-0 h-1 bg-red-600"
+                    class="absolute bottom-0 left-0"
                     :style="{ width: `clamp(0%, ${(item.currentTime / item.duration) * 100}%, 100%` }"
+                    style="
+                        height: 4rem;
+                        background: var(--efy_color);
+                        border-radius: 0 var(--efy_radius0) var(--efy_radius0) 0;
+                        box-shadow: 3rem 0 5rem #0005;
+                    "
                 />
             </div>
             <div class="flex items-center h-[44rem] overflow-hidden">
@@ -49,6 +65,7 @@
             </button>
             <router-link
                 class="btn efy_shadow_trans efy_shadow_button_off efy_button_text_off"
+                role="button"
                 :to="{
                     path: '/watch',
                     query: {
@@ -66,7 +83,7 @@
             <button
                 :title="$t('actions.add_to_playlist')"
                 @click="showModal = !showModal"
-                class="efy_shadow_trans efy_shadow_button_off efy_button_text_off"
+                class="btn efy_shadow_trans efy_shadow_button_off efy_button_text_off"
             >
                 <font-awesome-icon icon="circle-plus" />
             </button>
@@ -74,6 +91,7 @@
                 v-if="admin"
                 ref="removeButton"
                 :title="$t('actions.remove_from_playlist')"
+                class="efy_shadow_trans efy_shadow_button_off efy_button_text_off"
                 @click="showConfirmRemove = true"
             >
                 <font-awesome-icon icon="circle-minus" />
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 661e7fcd..26b52191 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -108,9 +108,9 @@
                         :playlist-index="index"
                         @close="showShareModal = !showShareModal"
                     />
-                    <button class="btn flex items-center" @click="showShareModal = !showShareModal">
+                    <button class="btn flex items-center share-btn" @click="showShareModal = !showShareModal">
                         <font-awesome-icon class="mx-1.5 mr-1" icon="fa-share" />
-                        <i18n-t class="lt-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
+                        <i18n-t keypath="actions.share" tag="strong"></i18n-t>
                     </button>
                     <!-- YouTube -->
                     <WatchOnButton :link="`https://youtu.be/${getVideoId()}`" />
@@ -707,9 +707,19 @@ export default {
     opacity: 0;
     transform: translateX(100%) scale(0.5);
 }
-
 .description a {
     text-decoration: underline;
     filter: brightness(0.75);
 }
+@media (width <= 768px) {
+    .share-btn {
+        aspect-ratio: 1;
+    }
+    .share-btn strong {
+        display: none;
+    }
+    .share-btn svg {
+        margin: 0;
+    }
+}
 </style>