- Adjusted verified checkmark aligning (top text)

- Changed import button (in /import) element to button, that causes buggy click pointer not working
- Made the image on WatchVideo component redirects to channel
- Centered the video card relative to their parent (Useful when theres not enough space for another column in a grid but still made an extra unnecessary space, what happen is the card would justify to the left)

package.json

@@ -3,8 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "serve over network": "vite --host",
+        "serve": "vite",
-        "serve over local": "vite",
         "build": "vite build",
         "preview": "vite preview",
         "lint": "eslint --fix --color --ignore-path .gitignore --ext .js,.vue ."

src/components/ChannelPage.vue

@@ -6,10 +6,12 @@
         <div class="pp-channel-page-author flex place-items-center">
             <img height="48" width="48" class="m-1" :src="channel.avatarUrl" />
             <div>
-                <h5 v-text="channel.name" />
+                <div class="flex">
+                    <h5 v-text="channel.name" />
+                    <font-awesome-icon class="ml-1.5" v-if="channel.verified" icon="check" />
+                </div>
                 <p class="text-left">{{ numberFormat(channel.subscriberCount) }} Subscribers</p>
             </div>
-            <font-awesome-icon class="ml-1.5" v-if="channel.verified" icon="check" />
         </div>
         <!-- eslint-disable-next-line vue/no-v-html -->
         <p class="whitespace-pre-wrap mt-2">

src/components/ImportPage.vue

@@ -12,7 +12,7 @@
                 <label for="import-override">Override</label>
             </div>
             <div>
-                <a class="btn w-auto" @click="handleImport">Import</a>
+                <button class="btn w-auto" @click="handleImport">Import</button>
             </div>
         </form>
         <br />

src/components/SubscriptionsPage.vue

@@ -19,7 +19,7 @@
                         <span class="mx-2" v-text="subscription.name" />
                     </router-link>
                     <button
-                        class="btn w-min"
+                        class="btn w-fit"
                         @click="handleButton(subscription)"
                         v-t="`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`"
                     />

src/components/VideoItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="showVideo">
+    <div v-if="showVideo" class="flex flex-col justify-between w-full">
         <router-link
             :to="{
                 path: '/watch',
@@ -50,38 +50,8 @@
                 />
             </div>
         </router-link>
-
+        <div class="flex mt-10">
-        <div class="float-right m-0 inline-block children:px-1">
+            <router-link :to="video.uploaderUrl" class="w-fit h-fit">
-            <router-link
-                :to="{
-                    path: '/watch',
-                    query: {
-                        v: video.url.substr(-11),
-                        ...(playlistId && { list: playlistId }),
-                        ...(index >= 0 && { index: index + 1 }),
-                        listen: '1',
-                    },
-                }"
-                :aria-label="'Listen to ' + video.title"
-                :title="'Listen to ' + video.title"
-            >
-                <font-awesome-icon icon="headphones" />
-            </router-link>
-            <button v-if="authenticated" :title="$t('actions.add_to_playlist')" @click="showModal = !showModal">
-                <font-awesome-icon icon="circle-plus" />
-            </button>
-            <button
-                v-if="admin"
-                :title="$t('actions.remove_from_playlist')"
-                ref="removeButton"
-                @click="removeVideo(video.url.substr(-11))"
-            >
-                <font-awesome-icon icon="circle-minus" />
-            </button>
-        </div>
-
-        <div class="flex">
-            <router-link :to="video.uploaderUrl">
                 <img
                     v-if="video.uploaderAvatar"
                     :src="video.uploaderAvatar"
@@ -96,7 +66,7 @@
             <div class="w-[calc(100%-32px-1rem)]">
                 <router-link
                     v-if="video.uploaderUrl && video.uploaderName && !hideChannel"
-                    class="link-secondary overflow-hidden block"
+                    class="link-secondary overflow-hidden block w-fit"
                     :to="video.uploaderUrl"
                     :title="video.uploaderName"
                 >
@@ -113,6 +83,35 @@
                     <span v-else-if="video.uploadedDate" class="pl-0.5" v-text="video.uploadedDate" />
                 </strong>
             </div>
+
+            <div class="inline-block children:px-1 self-end">
+                <router-link
+                    :to="{
+                        path: '/watch',
+                        query: {
+                            v: video.url.substr(-11),
+                            ...(playlistId && { list: playlistId }),
+                            ...(index >= 0 && { index: index + 1 }),
+                            listen: '1',
+                        },
+                    }"
+                    :aria-label="'Listen to ' + video.title"
+                    :title="'Listen to ' + video.title"
+                >
+                    <font-awesome-icon icon="headphones" />
+                </router-link>
+                <button v-if="authenticated" :title="$t('actions.add_to_playlist')" @click="showModal = !showModal">
+                    <font-awesome-icon icon="circle-plus" />
+                </button>
+                <button
+                    v-if="admin"
+                    :title="$t('actions.remove_from_playlist')"
+                    ref="removeButton"
+                    @click="removeVideo(video.url.substr(-11))"
+                >
+                    <font-awesome-icon icon="circle-minus" />
+                </button>
+            </div>
         </div>
     </div>
     <PlaylistAddModal v-if="showModal" :video-id="video.url.substr(-11)" @close="showModal = !showModal" />

src/components/WatchVideo.vue

@@ -67,7 +67,9 @@
             <div class="pp-watch-bellow-options flex">
                 <!-- Channel Image & Info -->
                 <div class="flex">
-                    <img :src="video.uploaderAvatar" alt="" loading="lazy" class="w-auto" />
+                    <router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">
+                        <img :src="video.uploaderAvatar" alt="" loading="lazy" class="w-auto" />
+                    </router-link>
                     <div>
                         <router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">{{
                             video.uploader

src/piped.css

@@ -25,7 +25,7 @@
 
 /*Avatar*/ .comment-avatar, .pp-import-channel img {width: 40rem; height:  40rem}
 
-/*Video Grid */ .video-grid {display: grid; gap: 15rem; grid-template-columns: repeat(auto-fit, minmax(300rem, 1fr));}
+/*Video Grid */ .video-grid {display: grid; gap: 15rem; grid-template-columns: repeat(auto-fit, minmax(300rem, 1fr)); justify-items:center;}
 
 tbody:nth-child(odd) {background: var(--efy_bg1)!important; box-shadow: inset 0 0 0 1.5px var(--efy_bg1)}