fix grid status to be dynamic

templates/partials/home/grid_stats.html

@@ -9,29 +9,37 @@ <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight
         </div>
         <dl class="items mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
             <!-- capacity -->
-          <div class="tooltip fade-in flex flex-col bg-white/5 p-8">
+          <div class="fade-in flex flex-col justify-center items-center bg-white/5 p-6">
+            <div class="tooltip">
               <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid. 1 petabyte equals roughly 1 million gigabytes.</span>
               <dt class="text-sm/6 font-light text-gray-300">CAPACITY</dt>
               <dd id="capacity" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
             </div>
+          </div>
             <!-- cores -->
-            <div class="tooltip fade-in flex flex-col bg-white/5 p-8">
+            <div class="fade-in flex flex-col bg-white/5 p-6">
+              <div class="tooltip">
               <span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
               <dt class="text-sm/6 font-light text-gray-300">CORES</dt>
               <dd id="cores" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
             </div>
+            </div>
             <!-- Nodes -->
-            <div class="tooltip fade-in flex flex-col bg-white/5 p-8">
+            <div class="fade-in flex flex-col bg-white/5 p-6">
+              <div class="tooltip">
               <span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
               <dt class="text-sm/6 font-light text-gray-300">NODES</dt>
               <dd id="nodes" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
             </div>
+            </div>
             <!-- countries -->
-            <div class="tooltip fade-in flex flex-col bg-white/5 p-8">
+            <div class="fade-in flex flex-col bg-white/5 p-6">
+              <div class="tooltip">
               <span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
               <dt class="text-sm/6 font-light text-gray-300">COUNTRIES</dt>
               <dd id="countries" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
             </div>
+            </div>
           </dl>
       </div>
       <div class="max-w-4xl items-center mx-auto">
@@ -85,14 +93,13 @@ <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight
 .tooltip {
   position: relative;
   display: inline-block;
-  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+  width: 100%;
 }
 
 /* Tooltip text */
 .tooltip .tooltiptext {
   font-size: 12px;
   visibility: hidden;
-  width: 250px;
   background-color: rgb(26 26 26 / 90%);
   color: #fff;
   text-align: center;
@@ -102,7 +109,10 @@ <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight
   /* Position the tooltip text - see examples below! */
   position: absolute;
   z-index: 1;
-  bottom: 4px;
+  bottom: -7px;
+    top: 0px;
+    left: 0px;
+    right: 0px;
   /* right: -60px; */
 }
 
@@ -115,10 +125,10 @@ <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight
     .tooltip .tooltiptext {
         position: absolute;
   z-index: 1;
-  bottom: 2px !important;
-  right: auto !important;
-  top: auto;
-  left: auto;
+  bottom: -7px !important;
+  right: 0px !important;
+  top: 0px !important;
+  left: 0px !important;
     }
 
 }