From 36e538a7be44295590309a9c54cfd6aeec4f91bb Mon Sep 17 00:00:00 2001
From: maciejpedzich <contact@maciejpedzi.ch>
Date: Thu, 21 Jul 2022 11:13:23 +0200
Subject: [PATCH] Implement further design tweaks

---
 components/snapshot/TrackEntries.vue |  2 +-
 pages/index.vue                      |  4 ++--
 pages/playlists/[playlistId].vue     | 16 +++++++---------
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/components/snapshot/TrackEntries.vue b/components/snapshot/TrackEntries.vue
index 9ec703d..15c108d 100644
--- a/components/snapshot/TrackEntries.vue
+++ b/components/snapshot/TrackEntries.vue
@@ -40,7 +40,7 @@ const formatRetentionText = (retention: number) => {
 
 const datatablePropsToEnable = computed(() =>
   props.page === 'snapshot'
-    ? { scrollable: true, scrollHeight: '500px' }
+    ? {}
     : {
         paginator: true,
         paginatorTemplate:
diff --git a/pages/index.vue b/pages/index.vue
index 5aa5c8a..0470912 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -82,8 +82,8 @@ const openSnapshotsCalendar = async ({
 <template>
   <NuxtLayout name="centered-content">
     <h1 class="m-0 md:text-5xl text-4xl">Spotify Playlist Archive</h1>
-    <div class="flex flex-column justify-content-center text-center">
-      <p class="text-xl text-gray-300">
+    <div class="md:p-0 p-2 flex flex-column justify-content-center text-center">
+      <p class="md:mt-3 mt-2 text-lg text-gray-300">
         Browse past versions of thousands of playlists saved over time
       </p>
       <div class="w-full md:px-0 px-3">
diff --git a/pages/playlists/[playlistId].vue b/pages/playlists/[playlistId].vue
index df00433..5e4c4a8 100644
--- a/pages/playlists/[playlistId].vue
+++ b/pages/playlists/[playlistId].vue
@@ -16,13 +16,13 @@ const tabItems = [
     label: 'Show statistics',
     icon: 'pi pi-chart-bar',
     to: `/playlists/${playlistId}/stats`
-  },
-  {
-    label: 'Compare snapshots (SOON)',
-    icon: 'pi pi-sort-alt',
-    to: `/playlists/${playlistId}/snapshots/compare`,
-    disabled: true
   }
+  // {
+  //   label: 'Compare snapshots (SOON)',
+  //   icon: 'pi pi-sort-alt',
+  //   to: `/playlists/${playlistId}/snapshots/compare`,
+  //   disabled: true
+  // }
 ];
 
 const { error, data: playlist } = await useFetch<Snapshot>(
@@ -61,7 +61,7 @@ const isNotFoundError = computed(
           {{ playlist.owner?.name }}
         </NuxtLink>
       </h1>
-      <TabMenu class="w-full mb-4" :model="tabItems" />
+      <TabMenu class="md:w-10 w-full mb-4" :model="tabItems" />
       <NuxtPage />
     </template>
   </div>
@@ -69,8 +69,6 @@ const isNotFoundError = computed(
 
 <style scoped>
 :deep(ul.p-tabmenu-nav) {
-  margin-left: 5rem;
-  margin-right: 5rem;
   justify-content: center;
 }