Implement responsive datatable variant

src/pages/playlists/[playlistId]/snapshots/[commitSha].astro

@@ -20,13 +20,13 @@ if (layoutProps.playlist) {
     );
 
     if (!githubResponse.ok) {
-      throw new Error(githubResponse.status.toString());
+      throw new Error(`GitHub ${githubResponse.status}`);
     }
 
     snapshot = (await githubResponse.json()) as PlaylistSnapshot;
     layoutProps.description = decode(snapshot.description, { level: 'html5' });
   } catch (error) {
-    const isNotFoundError = (error as Error).message === '404';
+    const isNotFoundError = (error as Error).message === 'GitHub 404';
 
     layoutProps.errorOccurred = true;
     layoutProps.title = 'Error';
@@ -44,8 +44,7 @@ if (layoutProps.playlist) {
   <p class="text-lg">{layoutProps.description}</p>
   <div class="overflow-x-auto">
     <table
-      id="snapshot-tracklist"
-      class="table w-full my-4 mb-8 border-[1px] border-b-0 border-r-0 border-base-content border-opacity-20"
+      class="table datatable mt-4 mb-8 border-[1px] border-b-0 border-r-0 border-base-content border-opacity-20"
     >
       <thead>
         <tr>
@@ -61,23 +60,28 @@ if (layoutProps.playlist) {
           snapshot?.tracks.map((track) => (
             <tr>
               <td>
+                <strong class="lg:hidden">Title</strong>
                 <a href={track.url} target="_blank" rel="noopener noreferrer">
                   {track.name}
                 </a>
               </td>
               <td>
-                {track.artists.map((artist) => (
-                  <a
-                    class="block mb-2 last-of-type:mb-0"
-                    href={artist.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {artist.name}
-                  </a>
-                ))}
+                <strong class="lg:hidden">Artist(s)</strong>
+                <span>
+                  {track.artists.map((artist) => (
+                    <a
+                      class="lg:block lg:mb-2 lg:last-of-type:mb-0 mr-2 last-of-type:mr-0"
+                      href={artist.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {artist.name}
+                    </a>
+                  ))}
+                </span>
               </td>
               <td>
+                <strong class="lg:hidden">Album</strong>
                 <a
                   href={track.album.url}
                   target="_blank"
@@ -86,8 +90,14 @@ if (layoutProps.playlist) {
                   {track.album.name}
                 </a>
               </td>
-              <td>{getFormattedDate(track.added_at)}</td>
-              <td>{formatDuration(track.duration_ms)}</td>
+              <td>
+                <strong class="lg:hidden">Date added</strong>
+                {getFormattedDate(track.added_at)}
+              </td>
+              <td>
+                <strong class="lg:hidden">Duration</strong>
+                {formatDuration(track.duration_ms)}
+              </td>
             </tr>
           ))
         }