From 6a8c1491b75887b5c6857ddd931e916ddd47a180 Mon Sep 17 00:00:00 2001
From: jowelyn <hornillajowelyn@gmail.com>
Date: Tue, 14 Nov 2023 23:03:33 +0800
Subject: [PATCH] responsive ui adjustments

---
 src/components/CardValue.vue      | 4 ++--
 src/modules/competition/index.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/CardValue.vue b/src/components/CardValue.vue
index a8ca1f6..8a68635 100644
--- a/src/components/CardValue.vue
+++ b/src/components/CardValue.vue
@@ -14,12 +14,12 @@ defineProps<Props>();
 </script>
 
 <template>
-  <div class="bg-white dark:bg-base100 shadow-md rounded-lg p-4 h-auto md:h-fit xl:!h-[95px] flex gap-2 flex-col xl:!flex-row">
+  <div class="bg-white dark:bg-base100 shadow-md rounded-lg p-4 h-auto md:h-full xl:!h-[95px] flex gap-2 flex-col xl:!flex-row">
     <div
       class="linear-gradient-tl-to-br-bg flex items-center justify-center aspect-square linear-gradient-tl-to-br-bg rounded h-12 w-12 xl:!h-full xl:!w-fit aspect-square">
       <Icon :icon="icon" class="text-3xl text-white" />
     </div>
-    <div class="h-full flex flex-col md:justify-between flex-nowrap min-w-[0px]">
+    <div class="h-full flex flex-col md:!justify-start flex-nowrap min-w-[0px]">
       <div class="text-gray-400 font-semibold w-full truncate">{{ title }}</div>
       <div class="flex flex-col md:!flex-row md:items-center md:gap-2 ">
         <div class="font-bold text-2xl truncate">{{ value }}</div>
diff --git a/src/modules/competition/index.vue b/src/modules/competition/index.vue
index d98cb6b..7ddbd6e 100644
--- a/src/modules/competition/index.vue
+++ b/src/modules/competition/index.vue
@@ -172,7 +172,7 @@ const isDarkMode = computed(() => baseStore.theme === 'dark');
       <img class="absolute bottom-0 opacity-50" :src="pillars" />
       <img class="absolute -bottom-[65px] w-[80%] left-0 right-0 mx-auto" :src="laptop" />
 
-      <div class="absolute bottom-0 px-6 py-4 rounded-xl ml-[16%] border border-white/20 backdrop-blur-sm">
+      <div class="absolute md:bottom-0 bottom-48 px-6 py-4 rounded-xl ml-[16%] border border-white/20 backdrop-blur-sm">
         <div class="relative space-y-2">
           <div class="text-2xl font-semibold text-white mr-12">All in with</div>
           <div><img :src="kiiExLogo" /></div>
@@ -183,7 +183,7 @@ const isDarkMode = computed(() => baseStore.theme === 'dark');
       </div>
 
       <div
-        class="absolute overflow-hidden bottom-2 px-6 py-4 rounded-xl right-[16%] border border-white/20 backdrop-blur-sm">
+        class="absolute overflow-hidden bottom-24 md:bottom-2 px-6 py-4 rounded-xl right-[16%] border border-white/20 backdrop-blur-sm">
         <div class="relative space-y-2">
           <div class="text-xl font-semibold text-white ml-12 text-right">
             <div v-for="text in ['Scalability', 'Connectivity', 'Simplicity']" class="flex gap-2 items-center">