From 0763b6b4ec64c8451c32c08301525b245faeb3bf Mon Sep 17 00:00:00 2001
From: Anda Toshiki <101481353+andatoshiki@users.noreply.github.com>
Date: Thu, 9 May 2024 17:55:57 -0700
Subject: [PATCH] style(overflow): add temporary tweak patch for songs page for
 avoiding child element within lstfm div container card is too long that
 pushes container out of screen breaking responsivness by adding overflow x
 value with a scrollbar

---
 src/pages/me/songs.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/me/songs.vue b/src/pages/me/songs.vue
index 18ff9fe..d016a67 100644
--- a/src/pages/me/songs.vue
+++ b/src/pages/me/songs.vue
@@ -123,7 +123,7 @@ export default Vue.extend({
             <section id="top-songs">
                 <Title class="mb-4">Top Songs (last 7 days)</Title>
 
-                <div class="grid gap-x-4 gap-y-2 break-all md:grid-cols-2">
+                <div class="overflow-x-scroll grid gap-x-4 gap-y-2 md:grid-cols-2 card-margin">
                     <CardLastFm
                         v-for="song of lastFm.topTracks"
                         :key="song.name"
@@ -155,7 +155,7 @@ export default Vue.extend({
             <section id="recent">
                 <Title class="mb-4">Recent Songs</Title>
 
-                <div class="grid gap-x-4 gap-y-2 md:grid-cols-2">
+                <div class="overflow-x-scroll grid gap-x-4 gap-y-2 md:grid-cols-2">
                     <CardLastFm
                         v-for="song of lastFm.recentTracks"
                         :key="song.name"