From aab44d8ceedbde94aef47674331b750747b6fcc2 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Fri, 17 Feb 2023 16:51:11 -0600
Subject: [PATCH] Fix:Alignment of recent sessions list #587

---
 pages/stats.vue    | 9 ++++-----
 tailwind.config.js | 3 ++-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/pages/stats.vue b/pages/stats.vue
index 2319aed8..78f74b17 100644
--- a/pages/stats.vue
+++ b/pages/stats.vue
@@ -37,14 +37,13 @@
         <template v-for="(item, index) in mostRecentListeningSessions">
           <div :key="item.id" class="w-full py-0.5">
             <div class="flex items-center mb-1">
-              <p class="text-smtext-white text-opacity-70 w-8">{{ index + 1 }}.&nbsp;</p>
+              <p class="text-sm text-white text-opacity-70 w-8 min-w-8">{{ index + 1 }}.&nbsp;</p>
               <div class="w-56">
-                <p class="text-smtext-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
+                <p class="text-sm text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
                 <p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
               </div>
-              <div class="flex-grow" />
-              <div class="w-18 text-right">
-                <p class="text-sm font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
+              <div class="w-16 min-w-16 text-right">
+                <p class="text-xs font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
               </div>
             </div>
           </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 3a2d32cb..714690d0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -45,7 +45,8 @@ module.exports = {
         '4': '1rem',
         '8': '2rem',
         '10': '2.5rem',
-        '12': '3rem'
+        '12': '3rem',
+        '16': '4rem'
       },
       minHeight: {
         '12': '3rem'