From b80765e6a4d35445488dacb6da34239da4ef6899 Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Mon, 21 Oct 2024 23:44:16 -0400
Subject: [PATCH] Clean up scroll bars and timeline.

---
 src/css/_scrollbars.css       | 82 +++++++++++++++++++++--------------
 src/views/Game/PlayerView.vue | 13 +++---
 2 files changed, 57 insertions(+), 38 deletions(-)

diff --git a/src/css/_scrollbars.css b/src/css/_scrollbars.css
index a181b84..93b0414 100644
--- a/src/css/_scrollbars.css
+++ b/src/css/_scrollbars.css
@@ -1,41 +1,57 @@
 @layer base {
-  html {
-    scrollbar-width: thin;
-    scrollbar-color: rgb(156, 163, 175) rgb(249, 250, 251);
+  body {
+    --sb-track-color: #0f172a;
+    --sb-thumb-color: #1e293b;
+    --sb-size: 10px;
   }
-  
-  body::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-  
-  body::-webkit-scrollbar-track {
-    @apply bg-gray-50;
-  }
-  
-  body::-webkit-scrollbar-thumb {
-    @apply bg-gray-400 rounded;
-  }
-  
-  body::-webkit-scrollbar-thumb:hover {
-    @apply bg-gray-500;
-  }
-}
 
-@layer utilities {
-  .dark-scrollbars-compat {
-    scrollbar-color: rgb(71, 85, 105) rgb(30, 41, 59);
+  body::-webkit-scrollbar {
+    width: var(--sb-size)
   }
-  
-  .dark-scrollbars::-webkit-scrollbar-track {
-    @apply bg-slate-800;
+
+  body::-webkit-scrollbar-track {
+    background: var(--sb-track-color);
+    border-radius: 4px;
   }
-  
-  .dark-scrollbars::-webkit-scrollbar-thumb {
-    @apply bg-slate-600;
+
+  body::-webkit-scrollbar-thumb {
+    background: var(--sb-thumb-color);
+    border-radius: 4px;
+    
   }
-  
-  .dark-scrollbars::-webkit-scrollbar-thumb:hover {
-    @apply bg-slate-500;
+
+  @supports not selector(::-webkit-scrollbar) {
+    body {
+      scrollbar-color: var(--sb-thumb-color)
+                      var(--sb-track-color);
+    }
+  }
+
+  .scrollbar {
+    --sb-track-color: #0f172a;
+    --sb-thumb-color: #1e293b;
+    --sb-size: 10px;
+  }
+
+  .scrollbar::-webkit-scrollbar {
+    width: var(--sb-size)
+  }
+
+  .scrollbar::-webkit-scrollbar-track {
+    background: var(--sb-track-color);
+    border-radius: 4px;
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    background: var(--sb-thumb-color);
+    border-radius: 4px;
+    
+  }
+
+  @supports not selector(::-webkit-scrollbar) {
+    .scrollbar {
+      scrollbar-color: var(--sb-thumb-color)
+                      var(--sb-track-color);
+    }
   }
 }
diff --git a/src/views/Game/PlayerView.vue b/src/views/Game/PlayerView.vue
index 17d82ba..720492c 100644
--- a/src/views/Game/PlayerView.vue
+++ b/src/views/Game/PlayerView.vue
@@ -523,23 +523,26 @@ async function generateTimeline(myProfile) {
           <div class="my-6">
             <CardBox>
               <ol
-                class="border-s border-neutral-300 md:flex md:justify-center md:gap-6 md:border-s-0 md:border-t"
+                class="border-s border-neutral-300 md:flex md:justify-start md:gap-10 md:border-s-0 md:border-t md:overflow-x-auto overflow-y-visible md:whitespace-nowrap scrollbar"
               >
                 <li
-                  v-for="playHistory of myProfile?.timeline"
+                  v-for="playHistory of JSON.parse(
+                    JSON.stringify(myProfile?.timeline)
+                  ).reverse()"
                   :key="playHistory.timestamp"
+                  class="md:inline-block flex-shrink-0"
                 >
                   <div
-                    class="flex-start flex items-center pt-2 md:block md:pt-0"
+                    class="flex-start flex items-center pt-2 md:block md:pt-4"
                   >
                     <div
-                      class="-ms-[5px] me-3 h-[9px] w-[9px] rounded-full bg-gray-300 md:-mt-[5px] md:me-0 md:ms-0"
+                      class="-ms-[6px] me-3 h-[12px] w-[12px] md:w-0.5 md:h-4 rounded-full md:rounded-none bg-gray-300 md:-mt-6 md:me-0 md:ms-0"
                     ></div>
                     <p class="mt-2 text-sm font-light">
                       {{ playHistory.timestamp }}
                     </p>
                   </div>
-                  <div class="ms-4 pb-4 md:ms-0">
+                  <div class="ms-4 pb-6 md:ms-0">
                     <h4 class="text-lg font-semibold">
                       {{ playHistory.arcade }}
                     </h4>