fix chart

src/app/components/Base/Chart.vue

@@ -1,6 +1,12 @@
 <template>
   <ClientOnly>
-    <apexchart width="100%" height="100%" :options="options" :series="series" />
+    <apexchart
+      width="100%"
+      height="100%"
+      v-bind="$attrs"
+      :options="options"
+      :series="series"
+    />
   </ClientOnly>
 </template>
 

src/app/components/ClientCard/ClientCard.vue

@@ -9,10 +9,14 @@
         <div class="flex flex-grow flex-col gap-1">
           <ClientCardName :client="client" />
           <div
-            class="block pb-1 text-xs text-gray-500 md:inline-block md:pb-0 dark:text-neutral-400"
+            class="flex flex-col pb-1 text-xs text-gray-500 md:inline-block md:pb-0 dark:text-neutral-400"
           >
-            <ClientCardAddress :client="client" />
-            <ClientCardLastSeen :client="client" />
+            <div>
+              <ClientCardAddress :client="client" />
+            </div>
+            <div>
+              <ClientCardLastSeen :client="client" />
+            </div>
           </div>
           <ClientCardOneTimeLink :client="client" />
           <ClientCardExpireDate :client="client" />

src/app/components/ClientCard/LastSeen.vue

@@ -1,10 +1,9 @@
 <template>
   <span
     v-if="client.latestHandshakeAt"
-    class="whitespace-nowrap text-gray-400 dark:text-neutral-500"
     :title="$t('client.lastSeen') + $d(new Date(client.latestHandshakeAt))"
   >
-    · {{ timeago(new Date(client.latestHandshakeAt)) }}
+    {{ timeago(new Date(client.latestHandshakeAt)) }}
   </span>
 </template>
 

src/app/components/ClientCard/Transfer.vue

@@ -3,7 +3,7 @@
   <div v-if="client.transferTx" class="min-w-20 md:min-w-24">
     <span
       class="flex gap-1"
-      :title="$t('totalDownload') + bytes(client.transferTx)"
+      :title="$t('client.totalDownload') + bytes(client.transferTx)"
     >
       <IconsArrowDown class="mt-0.5 inline h-3 align-middle" />
       <div>
@@ -22,7 +22,7 @@
   <div v-if="client.transferRx" class="min-w-20 md:min-w-24">
     <span
       class="flex gap-1"
-      :title="$t('totalUpload') + bytes(client.transferRx)"
+      :title="$t('client.totalUpload') + bytes(client.transferRx)"
     >
       <IconsArrowUp class="mt-0.5 inline h-3 align-middle" />
       <div>

src/app/stores/global.ts

@@ -5,6 +5,8 @@ export const useGlobalStore = defineStore('Global', () => {
 
   const sortClient = ref(true); // Sort clients by name, true = asc, false = desc
 
+  // TODO: migrate to cookies
+
   const uiShowCharts = ref(getItem('uiShowCharts') === '1');
 
   function toggleCharts() {