From 0451facc2ef7aae8760f98a6f78f57efbfe3fa7d Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Thu, 13 Aug 2026 23:10:55 +0530
Subject: [PATCH] Fix some layout issues.

---
 src/components/SubscriptionsPage.vue |  6 ++--
 src/components/WatchVideo.vue        | 45 ++++++++++++++++------------
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index f6e98618..7f012a6e 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -57,7 +57,7 @@
             @click="selectGroup(group)"
         >
             <span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" />
-            <div v-if="group.groupName != '' && selectedGroup == group">
+            <div v-if="group.groupName != '' && selectedGroup == group" class="inline-flex">
                 <i-fa6-solid-pen class="mx-2" @click="showEditGroupModal = true" />
                 <i-fa6-solid-circle-minus class="mx-2" @click="groupToDelete = group.groupName" />
             </div>
@@ -83,11 +83,11 @@
         <div
             v-for="subscription in filteredSubscriptions"
             :key="subscription.url"
-            class="m-2 rounded-lg border border-gray-500 p-1"
+            class="m-2 min-w-0 rounded-lg border border-gray-500 p-1"
         >
             <router-link :to="subscription.url" class="flex p-2 text-4xl font-bold">
                 <img :src="subscription.avatar" class="h-fit rounded-full" width="48" height="48" />
-                <span class="mx-2 self-center" v-text="subscription.name" />
+                <span class="mx-2 min-w-0 self-center truncate" v-text="subscription.name" />
             </router-link>
             <!-- subscribe / unsubscribe btn -->
             <button
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 7755ca50..70d0ebc2 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -128,30 +128,35 @@
                         :playlist-index="index"
                         @close="showShareModal = !showShareModal"
                     />
-                    <div class="ml-auto flex flex-wrap gap-1">
+                    <div class="ml-auto flex flex-wrap gap-1 items-center">
                         <!-- Subscribe Button -->
                         <button
-                            class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:hidden max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                            class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:hidden max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                             @click="downloadCurrentFrame"
                         >
-                            {{ $t("actions.download_frame") }}<i-fa6-solid-download class="ml-1" />
+                            <span>{{ $t("actions.download_frame") }}</span>
+                            <i-fa6-solid-download class="ml-1" />
                         </button>
                         <button
-                            class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                            class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                             @click="showModal = !showModal"
                         >
-                            {{ $t("actions.add_to_playlist") }}<i-fa6-solid-circle-plus class="ml-1" />
+                            <span>{{ $t("actions.add_to_playlist") }}</span>
+                            <i-fa6-solid-circle-plus class="ml-1" />
                         </button>
                         <button
-                            class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                            class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                             @click="subscribeHandler"
-                            v-text="
-                                $t('actions.' + (subscribed ? 'unsubscribe' : 'subscribe')) +
-                                ' - ' +
-                                numberFormat(video.uploaderSubscriberCount)
-                            "
-                        />
-                        <div class="flex flex-wrap gap-1">
+                        >
+                            <span>
+                                {{
+                                    $t("actions." + (subscribed ? "unsubscribe" : "subscribe")) +
+                                    " - " +
+                                    numberFormat(video.uploaderSubscriberCount)
+                                }}
+                            </span>
+                        </button>
+                        <div class="flex flex-wrap gap-1 items-center">
                             <!-- RSS Feed button -->
                             <a
                                 v-if="video.uploaderUrl"
@@ -160,16 +165,18 @@
                                 role="button"
                                 :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${video.uploaderUrl.split('/')[2]}`"
                                 target="_blank"
-                                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                                class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                             >
                                 <i-fa6-solid-rss class="mx-1.5" />
                             </a>
                             <!-- Share Dialog -->
                             <button
-                                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                                class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                                 @click="showShareModal = !showShareModal"
                             >
-                                <i18n-t class="max-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
+                                <strong class="max-lg:hidden">
+                                    <i18n-t keypath="actions.share" tag="span"></i18n-t>
+                                </strong>
                                 <i-fa6-solid-share class="mx-1.5" />
                             </button>
                             <!-- YouTube -->
@@ -185,12 +192,12 @@
                                 :to="toggleListenUrl"
                                 :aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
                                 :title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
-                                class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
+                                class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
                             >
-                                <div>
+                                <span>
                                     <i-fa6-solid-tv v-if="isListening" class="mx-1.5" />
                                     <i-fa6-solid-headphones v-else class="mx-1.5" />
-                                </div>
+                                </span>
                             </router-link>
                         </div>
                     </div>