From 4239ef2b35ab744106c1c437ce0d91a3c87b403d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <dnalop.me@gmail.com>
Date: Sun, 22 Jan 2023 20:45:35 +0100
Subject: [PATCH] Ensure error alert is centered for snapshot errors

---
 src/layouts/PlaylistPageTab.astro | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/layouts/PlaylistPageTab.astro b/src/layouts/PlaylistPageTab.astro
index 8774904..34b4103 100644
--- a/src/layouts/PlaylistPageTab.astro
+++ b/src/layouts/PlaylistPageTab.astro
@@ -18,7 +18,7 @@ const { playlist, title, description, errorOccurred } = Astro.props as Props;
   <div
     class:list={[
       'px-5 text-center flex flex-col gap-5 items-center',
-      playlist ? 'mt-[5.5rem]' : 'w-screen h-screen justify-center'
+      !errorOccurred ? 'mt-[5.5rem]' : 'w-screen h-screen justify-center'
     ]}
   >
   {
@@ -36,19 +36,11 @@ const { playlist, title, description, errorOccurred } = Astro.props as Props;
           {playlist.owner.name}
         </a>
       </h1>
-      <div class="tabs mb-2">
-        <a class="tab text-base" href={`/playlists/${playlistId}/snapshots`}>
-          <i class="fa-solid fa-calendar mr-3" />
-          Browse snapshots
-        </a>
-        <a class="tab text-base">
-          <i class="fa-solid fa-plus-minus mr-3" />
-          Compare snapshots
-        </a>
-        <a class="tab text-base">
-          <i class="fa-solid fa-chart-line mr-3" />
-          Show statistics
-        </a>
+      <div class="tabs mb-2 w-full flex lg:justify-center justify-start flex-nowrap overflow-x-auto overflow-y-hidden">
+        <a class="tab text-base" href={`/playlists/${playlistId}/snapshots`}><i class="fa-solid fa-calendar" />Browse snapshots</a>
+        <a class="tab text-base"><i class="fa-solid fa-plus-minus" />Compare snapshots</a>
+        <a class="tab text-base"><i class="fa-solid fa-search" />Find a featured track</a>
+        <a class="tab text-base"><i class="fa-solid fa-chart-line" />Show statistics</a>
       </div>
       <slot />
     ) : (