search result fix

Author: nikkyeya

app/globals.css

@@ -634,58 +634,60 @@
 
     .dialog {
       @apply bg-dark-400! max-w-sm sm:max-w-md md:max-w-2xl mx-auto;
+    }
 
-      .cmd-input {
-        @apply bg-dark-500!;
-
-        input {
-          @apply placeholder:text-purple-100!;
-        }
-      }
-
-      .list {
-        @apply bg-dark-500 max-h-100;
-      }
+    .cmd-input {
+      @apply bg-dark-500!;
 
-      .empty {
-        @apply py-6 text-center text-sm text-gray-400;
+      input {
+        @apply placeholder:text-purple-100!;
       }
+    }
 
-      .heading {
-        @apply flex items-center gap-2 text-purple-100;
-      }
+    .list {
+      @apply bg-dark-500 max-h-100;
+    }
 
-      .group {
-        @apply bg-dark-500 text-purple-100;
-      }
+    .heading {
+      @apply flex items-center gap-2 text-purple-100;
+    }
 
-      .search-item {
-        @apply grid! grid-cols-4! gap-4! items-center! data-[selected=true]:bg-dark-400! transition-all! cursor-pointer! hover:bg-dark-400/50! py-3!;
+    .group {
+      @apply bg-dark-500 text-purple-100;
+    }
+  }
 
-        .coin-info {
-          @apply flex! gap-2! items-center! col-span-2!;
+  .dialog {
+    .empty {
+      @apply py-6 text-center text-sm text-gray-400;
+    }
 
-          img {
-            @apply size-9 rounded-full;
-          }
+    .search-item {
+      @apply grid grid-cols-4 gap-4 items-center justify-between data-[selected=true]:bg-dark-400 transition-all !cursor-pointer hover:bg-dark-400 py-3;
 
-          div {
-            @apply flex flex-col;
-          }
+      .coin-info {
+        @apply flex gap-4 items-center col-span-2;
 
-          .coin-symbol {
-            @apply text-sm text-purple-100 uppercase;
-          }
+        img {
+          @apply size-9 rounded-full;
         }
 
-        .coin-price {
-          @apply font-semibold text-sm lg:text-base;
+        div {
+          @apply flex flex-col;
         }
 
-        .coin-change {
-          @apply flex gap-1 text-sm lg:text-base items-center font-medium;
+        .coin-symbol {
+          @apply text-sm text-purple-100 uppercase;
         }
       }
+
+      .coin-price {
+        @apply font-semibold text-sm lg:text-base;
+      }
+
+      .coin-change {
+        @apply flex gap-1 text-sm lg:text-base items-center font-medium;
+      }
     }
   }
 

components/SearchModal.tsx

@@ -38,7 +38,7 @@ const SearchItem = ({ coin, onSelect, isActiveName }: SearchItemProps) => {
       className='search-item'
     >
       <div className='coin-info'>
-        <Image src={coin.thumb} alt={coin.name} width={32} height={32} />
+        <Image src={coin.thumb} alt={coin.name} width={40} height={40} />
 
         <div>
           <p className={cn('font-bold', isActiveName && 'text-white')}>