324 sidebar overflow

app/app/(music)/track/[id]/TrackView.tsx

@@ -10,13 +10,11 @@ const TrackView = ({
   artist,
   audioFeatures,
   recommendations,
-  danceRecommendations,
 }: {
   track: SpotifyApi.TrackObjectFull;
   artist: SpotifyApi.ArtistObjectFull;
   audioFeatures: SpotifyApi.AudioFeaturesResponse;
   recommendations: SpotifyApi.RecommendationsFromSeedsResponse;
-  danceRecommendations: string[];
 }) => (
   <>
     <MusicHeader
@@ -62,13 +60,6 @@ const TrackView = ({
     <div className="divider" />
     <h4 className="font-black uppercase pb-2">Track Statistics</h4>
     <AudioFeatures audioFeatures={audioFeatures} />
-    {danceRecommendations.length > 0 && (
-      <p className="pt-2 text-sm">
-        You could dance {danceRecommendations[0]}
-        {danceRecommendations[1] ? ` or ${danceRecommendations[1]}` : ""} to
-        this!
-      </p>
-    )}
     <div className="divider" />
     <h4 className="font-black uppercase">Similar Tracks</h4>
     <TrackList tracks={recommendations.tracks} showAlbum />

app/app/(music)/track/[id]/page.tsx

@@ -1,5 +1,4 @@
 import fetchServer from "@/lib/fetch/fetchServer";
-import getDanceRecommendations from "@/lib/getDanceRecommendations";
 
 import TrackView from "./TrackView";
 
@@ -40,18 +39,7 @@ const getData = async (id: string) => {
       }
     );
 
-  const danceRecommendations = getDanceRecommendations(
-    audioFeatures.tempo,
-    audioFeatures.time_signature
-  );
-
-  return {
-    track,
-    artist,
-    audioFeatures,
-    recommendations,
-    danceRecommendations,
-  };
+  return { track, artist, audioFeatures, recommendations };
 };
 
 const Page = async ({ params }: { params: { id: string } }) => {
@@ -63,7 +51,6 @@ const Page = async ({ params }: { params: { id: string } }) => {
       artist={data.artist}
       audioFeatures={data.audioFeatures}
       recommendations={data.recommendations}
-      danceRecommendations={data.danceRecommendations}
     />
   );
 };

components/music/AudioFeatures.tsx

@@ -28,17 +28,17 @@ const AudioFeatures = ({
       value: audioFeatures.loudness + 60,
       max: 65,
     },
-  ] as const;
+  ];
 
   return (
     <div className="stats stats-vertical lg:stats-horizontal shadow w-full bg-primary text-primary-content">
       {data.map((feature) => (
         <div key={feature.name} className="stat">
-          <p className="stat-title text-primary-content">{feature.name}</p>
-          <p className="stat-value">
+          <div className="stat-title">{feature.name}</div>
+          <div className="stat-value">
             {`${Math.round((feature.value / feature.max) * 100)}%`}
-          </p>
-          <div className="stat-desc text-primary-content">
+          </div>
+          <div className="stat-desc">
             <progress
               className="progress progress-secondary"
               value={feature.value}

components/music/lists/AlbumList.tsx

@@ -23,7 +23,7 @@ const AlbumList = ({
       <tbody>
         {albums.map((album) => (
           <tr className="hover" key={album.id}>
-            <td>
+            <td className="truncate max-w-[500px]">
               <Link
                 className="font-bold text-primary"
                 href={`/app/album/${album.id}`}

components/music/lists/OffsetTrackList.tsx

@@ -15,7 +15,7 @@ const OffsetTrackList = ({
   showAlbum?: boolean;
 }) => (
   <div className="overflow-x-auto">
-    <table className="table table-compact">
+    <table className="table table-compact w-full">
       <thead>
         <tr>
           {showNumber && <th>#</th>}
@@ -30,15 +30,15 @@ const OffsetTrackList = ({
         {tracks.map((track, index) => (
           <tr className="hover" key={track.id}>
             {showNumber && <td>{index + 1}</td>}
-            <td>
+            <td className="truncate max-w-[400px]">
               <a
                 className="font-bold text-primary"
                 href={`/app/track/${track.id}`}
               >
                 {track.name}
               </a>
             </td>
-            <td>
+            <td className="truncate max-w-[400px]">
               <ArtistLinks artists={track.artists} />
             </td>
             {showAlbum && "album" in track && (

components/music/lists/TrackList.tsx

@@ -18,7 +18,7 @@ const TrackList = ({
   showAlbum?: boolean;
 }) => (
   <div className="overflow-x-auto">
-    <table className="table table-compact">
+    <table className="table table-compact w-full">
       <thead>
         <tr>
           {showNumber && <th>#</th>}
@@ -35,19 +35,19 @@ const TrackList = ({
         {tracks.map((track, index) => (
           <tr className="hover" key={track.id}>
             {showNumber && <td>{index + 1}</td>}
-            <td>
+            <td className="truncate max-w-[300px]">
               <a
                 className="font-bold text-primary"
                 href={`/app/track/${track.id}`}
               >
                 {track.name}
               </a>
             </td>
-            <td>
+            <td className="truncate max-w-[300px]">
               <ArtistLinks artists={track.artists} />
             </td>
             {showAlbum && "album" in track && (
-              <td>
+              <td className="truncate max-w-[200px]">
                 <a className="font-bold" href={`/app/album/${track.album.id}`}>
                   {track.album.name}
                 </a>