Fix charts on mobile

src/www/css/app.css

@@ -1141,11 +1141,6 @@ video {
   padding-bottom: 0.75rem;
 }
 
-.py-5 {
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
-}
-
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1597,6 +1592,11 @@ video {
     padding-right: 0px;
   }
 
+  .md\:py-5 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+
   .md\:pb-0 {
     padding-bottom: 0px;
   }

src/www/index.html

@@ -77,17 +77,17 @@
               class="relative overflow-hidden border-b last:border-b-0 border-gray-100 dark:border-neutral-600 border-solid">
 
               <!-- Chart -->
-              <div v-if="uiChartType" class="absolute z-0 bottom-0 left-0 right-0" style="top: 60%;">
+              <div v-if="uiChartType" class="absolute z-0 bottom-0 left-0 right-0 h-6" >
                 <apexchart width="100%" height="100%" :options="chartOptionsTX" :series="client.transferTxSeries">
                 </apexchart>
               </div>
-              <div v-if="uiChartType" class="absolute z-0 top-0 left-0 right-0" style="bottom: 60%;">
+              <div v-if="uiChartType" class="absolute z-0 top-0 left-0 right-0 h-6" >
                 <apexchart width="100%" height="100%" :options="chartOptionsRX" :series="client.transferRxSeries"
                   style="transform: scaleY(-1);">
                 </apexchart>
               </div>
 
-              <div class="relative py-5 px-3 z-10 flex flex-col sm:flex-row justify-between gap-3">
+              <div class="relative py-3 md:py-5 px-3 z-10 flex flex-col sm:flex-row justify-between gap-3">
                 <div class="flex gap-3 md:gap-4 w-full items-center ">
 
                   <!-- Avatar -->

src/www/js/app.js

@@ -86,6 +86,10 @@ new Vue({
         animations: {
           enabled: false,
         },
+        parentHeightOffset: 0,
+        sparkline: {
+          enabled: true,
+        }
       },
       colors: [],
       stroke: {
@@ -117,10 +121,10 @@ new Vue({
           show: false,
         },
         axisTicks: {
-          show: true,
+          show: false,
         },
         axisBorder: {
-          show: true,
+          show: false,
         },
       },
       yaxis: {
@@ -184,8 +188,9 @@ new Vue({
         }
 
         // Debug
-        // client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
+        client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
-        // client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
+        client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
+        client.latestHandshakeAt = new Date();
 
         this.clientsPersist[client.id].transferRxCurrent = client.transferRx - this.clientsPersist[client.id].transferRxPrevious;
         this.clientsPersist[client.id].transferRxPrevious = client.transferRx;