Apply rounded border to channels in search results (#2672)

* Apply rounded border to channels in search results

* use built-in utility class

* Contain channel thumbnail size

* contain results in flexbox and implement custom Uno classes

* correct linter errors

* remove custom rule

src/components/ChannelItem.vue

@@ -1,8 +1,8 @@
 <template>
-    <div>
+    <div class="flex flex-col flex-justify-between">
         <router-link :to="props.item.url">
-            <div class="relative">
-                <img class="w-full aspect-square" :src="props.item.thumbnail" loading="lazy" />
+            <div class="flex justify-center h-[10rem] mb-4">
+                <img class="aspect-square rounded-full" :src="props.item.thumbnail" loading="lazy" />
             </div>
             <p>
                 <span v-text="props.item.name" />

src/components/PlaylistItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="flex flex-col flex-justify-between">
         <router-link :to="props.item.url">
             <div class="relative">
                 <img class="w-full" :src="props.item.thumbnail" loading="lazy" />

src/components/VideoItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="showVideo">
+    <div class="flex flex-col flex-justify-between" v-if="showVideo">
         <router-link
             class="focus:underline hover:underline inline-block w-full"
             :to="{