From f621251a425951716b2781e25164734af8f58d20 Mon Sep 17 00:00:00 2001
From: iatenine <iatenine@gmail.com>
Date: Sun, 16 Jul 2023 15:05:56 -0500
Subject: [PATCH] contain results in flexbox and implement custom Uno classes

---
 src/components/ChannelItem.vue  | 4 ++--
 src/components/PlaylistItem.vue | 2 +-
 src/components/VideoItem.vue    | 2 +-
 uno.config.js                   | 1 +
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/ChannelItem.vue b/src/components/ChannelItem.vue
index 19808fdf..a500597b 100644
--- a/src/components/ChannelItem.vue
+++ b/src/components/ChannelItem.vue
@@ -1,7 +1,7 @@
 <template>
-    <div>
+    <div class="flex flex-col flex-justify-between">
         <router-link :to="props.item.url">
-            <div class="flex justify-center h-30">
+            <div class="flex justify-center h-10-rem mb-4">
                 <img class="aspect-square rounded-full" :src="props.item.thumbnail" loading="lazy" />
             </div>
             <p>
diff --git a/src/components/PlaylistItem.vue b/src/components/PlaylistItem.vue
index 469b3b34..7f2bad7f 100644
--- a/src/components/PlaylistItem.vue
+++ b/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" />
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index e05e3992..9dbd2ed9 100644
--- a/src/components/VideoItem.vue
+++ b/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="{
diff --git a/uno.config.js b/uno.config.js
index bf0d1e67..e9fa8bf9 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -8,6 +8,7 @@ import presetWebFonts from "@unocss/preset-web-fonts";
 
 export default defineConfig({
     transformers: [transformerDirective(), transformerVariantGroup()],
+    rules: [[/^h-([\.\d]+)-rem$/, ([_, num]) => ({ height: `${num}rem` })]],
     presets: [
         presetUno({
             dark: "media",