fix glitchy song title animation

src/assets/main.css

@@ -2,16 +2,6 @@
 
 @theme {
     --breakpoint-xs: 400px;
-    --animate-scroll-left: scroll-left 10s linear infinite;
-
-    @keyframes scroll-left {
-        0% {
-            transform: translateX(50%);
-        }
-        100% {
-            transform: translateX(-50%);
-        }
-    }
 }
 
 body {
@@ -28,4 +18,27 @@ body {
         background-color:gray;
         border-radius: var(--radius-lg);
     }
+}
+
+.marquee {
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.marquee-content {
+  display: inline-block;
+  animation: scroll 10s linear infinite;
+}
+
+.marquee-content span {
+  display: inline-block;
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
 }

src/components/info/MusicComponent.tsx

@@ -32,9 +32,10 @@ export default function MusicComponent() {
           <div className="flex align-middle">
             <img width="50" src={music.images[1]?.url} />
             <div className="pl-2 max-w-25">
-              <div className="overflow-hidden whitespace-nowrap">
+              <div className="marquee">
-                <div className="inline-block animate-scroll-left">
+                <div className="marquee-content">
-                  <p>{music.title}</p>
+                  <span>{music.title}&nbsp;&nbsp;</span>
+                  <span>{music.title}&nbsp;&nbsp;</span>
                 </div>
               </div>