From d0919e919a32550cfc168cfdd9b762c5c1771d5d Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sun, 14 May 2023 10:17:38 +0800
Subject: [PATCH] feat: uptime layout

---
 src/modules/[chain]/uptime/index.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/modules/[chain]/uptime/index.vue b/src/modules/[chain]/uptime/index.vue
index b20ef9d3..2ebd39f2 100644
--- a/src/modules/[chain]/uptime/index.vue
+++ b/src/modules/[chain]/uptime/index.vue
@@ -91,7 +91,9 @@ watchEffect(() => {
 <template>
   <div class="bg-base-100 px-5 pt-5">
     <div class="flex items-center gap-x-4">
-      <div class="text-main text-lg">Current Height: {{ latest.block?.header?.height }}</div>
+      <div class="text-main text-lg">
+        Current Height: {{ latest.block?.header?.height }}
+      </div>
       <input
         type="text"
         v-model="keyword"
@@ -99,12 +101,15 @@ watchEffect(() => {
         class="input input-sm w-full flex-1"
       />
       <button class="btn btn-primary btn-sm">
-        <Icon icon="mdi-star" class="mr-2 text-lg" /> <span class="">Favorite</span>
+        <Icon icon="mdi-star" class="mr-2 text-lg" />
+        <span class="">Favorite</span>
       </button>
     </div>
 
-    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 mt-4">
-      <div v-for="(v, i) in validators">
+    <div
+      class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-x-4 mt-4"
+    >
+      <div v-for="(v, i) in validators" :key="i">
         <div class="flex items-center justify-between">
           <VCheckbox
             v-model="selected"
@@ -112,7 +117,7 @@ watchEffect(() => {
             :value="v.operator_address"
           >
             <template v-slot:label>
-              <span class="text-truncate"
+              <span class="text-truncate text-sm"
                 >{{ i + 1 }}. {{ v.description.moniker }}</span
               >
             </template>