From 3d821dacb7a7c35f962f06fcf0cff9a4c03d0244 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 4 Jun 2022 15:51:00 -0500
Subject: [PATCH] Fix:Sessions table cleanup

---
 .../modals/ListeningSessionModal.vue          |  5 +++-
 client/pages/config/sessions.vue              | 28 ++++++++++---------
 client/pages/config/users/_id/sessions.vue    | 23 +++++++--------
 client/tailwind.config.js                     |  1 +
 4 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/client/components/modals/ListeningSessionModal.vue b/client/components/modals/ListeningSessionModal.vue
index 7c4166b6..f460cada 100644
--- a/client/components/modals/ListeningSessionModal.vue
+++ b/client/components/modals/ListeningSessionModal.vue
@@ -87,7 +87,7 @@
           <p class="mb-1">{{ playMethodName }}</p>
           <p class="mb-1">{{ _session.mediaPlayer }}</p>
 
-          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">Device</p>
+          <p v-if="hasDeviceInfo" class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">Device</p>
           <p v-if="deviceInfo.ipAddress" class="mb-1">{{ deviceInfo.ipAddress }}</p>
           <p v-if="osDisplayName" class="mb-1">{{ osDisplayName }}</p>
           <p v-if="deviceInfo.browserName" class="mb-1">{{ deviceInfo.browserName }}</p>
@@ -127,6 +127,9 @@ export default {
     deviceInfo() {
       return this._session.deviceInfo || {}
     },
+    hasDeviceInfo() {
+      return Object.keys(this.deviceInfo).length
+    },
     osDisplayName() {
       if (!this.deviceInfo.osName) return null
       return `${this.deviceInfo.osName} ${this.deviceInfo.osVersion}`
diff --git a/client/pages/config/sessions.vue b/client/pages/config/sessions.vue
index c2dceae6..aec8d6e6 100644
--- a/client/pages/config/sessions.vue
+++ b/client/pages/config/sessions.vue
@@ -8,21 +8,22 @@
 
           <ui-dropdown v-model="selectedUser" :items="userItems" label="Filter by User" small class="max-w-48" @input="updateUserFilter" />
         </div>
-        <div v-if="listeningSessions.length">
+        <div v-if="listeningSessions.length" class="block max-w-full">
           <table class="userSessionsTable">
             <tr class="bg-primary bg-opacity-40">
-              <th class="flex-grow text-left">Item</th>
-              <th class="w-20 text-left">User</th>
-              <th class="w-32 text-left hidden md:table-cell">Play Method</th>
-              <th class="w-40 text-left hidden sm:table-cell">Device Info</th>
-              <th class="w-20">Listened</th>
-              <th class="w-20">Last Time</th>
-              <th class="w-40 hidden sm:table-cell">Last Update</th>
+              <th class="w-48 min-w-48 text-left">Item</th>
+              <th class="w-20 min-w-20 text-left hidden md:table-cell">User</th>
+              <th class="w-32 min-w-32 text-left hidden md:table-cell">Play Method</th>
+              <th class="w-32 min-w-32 text-left hidden sm:table-cell">Device Info</th>
+              <th class="w-32 min-w-32">Listened</th>
+              <th class="w-16 min-w-16">Last Time</th>
+              <th class="flex-grow hidden sm:table-cell">Last Update</th>
             </tr>
+
             <tr v-for="session in listeningSessions" :key="session.id" class="cursor-pointer" @click="showSession(session)">
-              <td class="py-1">
-                <p class="text-sm text-gray-200">{{ session.displayTitle }}</p>
-                <p class="text-xs text-gray-400">{{ session.displayAuthor }}</p>
+              <td class="py-1 max-w-48">
+                <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
+                <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
               </td>
               <td class="hidden md:table-cell">
                 <p v-if="filteredUserUsername" class="text-xs">{{ filteredUserUsername }}</p>
@@ -42,7 +43,7 @@
               </td>
               <td class="text-center hidden sm:table-cell">
                 <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDate(session.updatedAt, 'MMMM do, yyyy HH:mm')">
-                  <p class="text-xs">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
+                  <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
                 </ui-tooltip>
               </td>
             </tr>
@@ -166,10 +167,11 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .userSessionsTable {
   border-collapse: collapse;
   width: 100%;
+  max-width: 100%;
   border: 1px solid #474747;
 }
 .userSessionsTable tr:first-child {
diff --git a/client/pages/config/users/_id/sessions.vue b/client/pages/config/users/_id/sessions.vue
index 3098770c..c8797b04 100644
--- a/client/pages/config/users/_id/sessions.vue
+++ b/client/pages/config/users/_id/sessions.vue
@@ -21,17 +21,17 @@
         <div v-if="listeningSessions.length">
           <table class="userSessionsTable">
             <tr class="bg-primary bg-opacity-40">
-              <th class="flex-grow text-left">Item</th>
-              <th class="w-32 text-left hidden md:table-cell">Play Method</th>
-              <th class="w-40 text-left hidden sm:table-cell">Device Info</th>
-              <th class="w-20">Listened</th>
-              <th class="w-20">Last Time</th>
-              <th class="w-40 hidden sm:table-cell">Last Update</th>
+              <th class="w-48 min-w-48 text-left">Item</th>
+              <th class="w-32 min-w-32 text-left hidden md:table-cell">Play Method</th>
+              <th class="w-32 min-w-32 text-left hidden sm:table-cell">Device Info</th>
+              <th class="w-32 min-w-32">Listened</th>
+              <th class="w-16 min-w-16">Last Time</th>
+              <th class="flex-grow hidden sm:table-cell">Last Update</th>
             </tr>
             <tr v-for="session in listeningSessions" :key="session.id" class="cursor-pointer" @click="showSession(session)">
-              <td class="py-1">
-                <p class="text-sm text-gray-200">{{ session.displayTitle }}</p>
-                <p class="text-xs text-gray-400">{{ session.displayAuthor }}</p>
+              <td class="py-1 max-w-48">
+                <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
+                <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
               </td>
               <td class="hidden md:table-cell">
                 <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
@@ -47,7 +47,7 @@
               </td>
               <td class="text-center hidden sm:table-cell">
                 <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDate(session.updatedAt, 'MMMM do, yyyy HH:mm')">
-                  <p class="text-xs">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
+                  <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
                 </ui-tooltip>
               </td>
             </tr>
@@ -149,10 +149,11 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .userSessionsTable {
   border-collapse: collapse;
   width: 100%;
+  max-width: 100%;
   border: 1px solid #474747;
 }
 .userSessionsTable tr:first-child {
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 3dae990b..b6e831fc 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -39,6 +39,7 @@ module.exports = {
         '6': '1.5rem',
         '12': '3rem',
         '16': '4rem',
+        '20': '5rem',
         '24': '6rem',
         '32': '8rem',
         '48': '12rem',