fix responsiveness, fix scrolling text

src/assets/main.css

@@ -1,7 +1,17 @@
 @import "tailwindcss";
 
 @theme {
-    --breakpoint-xs: 400px
+    --breakpoint-xs: 400px;
+    --animate-scroll-left: scroll-left 10s linear infinite;
+
+    @keyframes scroll-left {
+        0% {
+            transform: translateX(50%);
+        }
+        100% {
+            transform: translateX(-50%);
+        }
+    }
 }
 
 body {
@@ -19,8 +29,3 @@ body {
         border-radius: var(--radius-lg);
     }
 }
-
-@keyframes scroll {
-    0% { transform: translateX(100%); }
-    100% { transform: translateX(-100%); }
-}

src/components/FantasyStatus.tsx

@@ -35,7 +35,7 @@ export default function FantasyStatus() {
   }, []);
 
   return (
-    <div className="border border-white border-solid rounded-lg w-full sm:w-[500px] p-2">
+    <div className="border border-white border-solid rounded-lg w-full p-2">
       <div className="mb-4 space-y-4">
         <a
           href="https://sleeper.com/leagues/1263620000418119680/matchup"

src/components/Overlay.tsx

@@ -8,15 +8,6 @@ export default function Overlay({
   onClose: () => void;
 }) {
   return (
-    // <div onClick={onClose} className="fixed bg-black/50">
-    //   <p
-    //     onClick={onClose}
-    //     className="absolute text-2xl font-bold top-4 right-4 bg-white text-black rounded-full p-2"
-    //   >
-    //     X
-    //   </p>
-    //   {children}
-    // </div>
     <div onClick={onClose} className="fixed bg-black/50 w-full h-full z-1">
       {children}
     </div>

src/components/ScrollingText.tsx

@@ -1,69 +0,0 @@
-import { useEffect, useRef } from "react";
-
-const ScrollingText = ({
-  speed = 0.5,
-  size = "37",
-  text,
-}: {
-  speed?: number;
-  size?: string;
-  text: string;
-}) => {
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const scrollContainer = scrollContainerRef.current;
-    const contentElement = contentRef.current;
-
-    if (!scrollContainer || !contentElement) return;
-
-    // Create a clone of the content element
-    const clone = contentElement.cloneNode(true) as HTMLDivElement;
-    scrollContainer.appendChild(clone);
-
-    let animationId: number;
-    let scrollPosition = 0;
-
-    const animate = () => {
-      if (!scrollContainer || !contentElement) return;
-
-      // Increment scroll position based on speed
-      scrollPosition += speed;
-
-      // Reset position when first element is scrolled out of view
-      if (scrollPosition >= contentElement.offsetWidth) {
-        scrollPosition = 0;
-      }
-
-      // Apply scroll position
-      scrollContainer.scrollLeft = scrollPosition;
-
-      animationId = requestAnimationFrame(animate);
-    };
-
-    animationId = requestAnimationFrame(animate);
-
-    return () => {
-      cancelAnimationFrame(animationId);
-    };
-  }, [speed, text]);
-
-  if (text) {
-    return (
-      <div
-        ref={scrollContainerRef}
-        className={`w-${size} overflow-hidden rounded-lg whitespace-nowrap`}
-      >
-        <div ref={contentRef} className="inline-block">
-          &nbsp;&nbsp;
-          <span className="text-xl font-medium text-white hover:underline">
-            {text}
-          </span>
-        </div>
-      </div>
-    );
-  }
-};
-
-export default ScrollingText;

src/components/info/MusicComponent.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import ScrollingText from "../ScrollingText";
 import type { LastFMMusicObject } from "../../utils/types";
 
 export default function MusicComponent() {
@@ -28,13 +27,23 @@ export default function MusicComponent() {
 
   if (music) {
     return (
-      <div className="flex align-middle">
+      <a href="https://last.fm/user/lulawex" target="_blank">
-        <img width="50" src={music.images[1]?.url} />
+        <div className="flex flex-col">
-        <div className="pl-2 max-w-25">
+          <div className="flex align-middle">
-          <ScrollingText size="24" speed={0.1} text={music.title} />
+            <img width="50" src={music.images[1]?.url} />
-          <p className="truncate">{music.artist}</p>
+            <div className="pl-2 max-w-25">
+              <div className="overflow-hidden whitespace-nowrap">
+                <div className="inline-block animate-scroll-left">
+                  <p>{music.title}</p>
+                </div>
+              </div>
+
+              <p className="truncate">{music.artist}</p>
+            </div>
+          </div>
+          <p className="hover:underline w-fit opacity-50">powered by last.fm</p>
         </div>
-      </div>
+      </a>
     );
   } else {
     if (failedFetch) {

src/components/modules/CountdownModule.tsx

@@ -41,7 +41,7 @@ export default function CountdownModule() {
   }, []);
 
   return (
-    <div className="border border-white bg-blue-800 border-solid rounded-lg w-full sm:w-[500px] mb-4">
+    <div className="border border-white bg-blue-800 border-solid rounded-lg w-full mb-4">
       <div className="flex items-center justify-between p-2">
         <img
           onClick={() => {

src/components/modules/InfoModule.tsx

@@ -5,7 +5,7 @@ export default function InfoModule() {
   return (
     <div className="border border-white border-solid rounded-lg p-2">
       <div className="flex flex-wrap justify-between p-2 space-y-2">
-        <div>
+        <div className="space-y-2">
           <h1 className="text-2xl font-bold italic opacity-95">alex, 18</h1>
           <img
             src="https://storage.alexav.gg/content/6d87f5ac-e7f0-413c-84a6-6838e590b7d9.png"
@@ -14,13 +14,6 @@ export default function InfoModule() {
           />
           <div className="pt-2">
             <MusicComponent />
-            <a
-              href="https://last.fm/user/lulawex"
-              target="_blank"
-              className="hover:underline w-fit opacity-50"
-            >
-              powered by last.fm
-            </a>
           </div>
         </div>
         <div>
@@ -38,7 +31,7 @@ export default function InfoModule() {
             , game, code
           </p>
           <h1
-            className="italic opacity-50 font-semibold underline"
+            className="italic opacity-50 font-semibold select-text underline"
             onClick={() => navigator.clipboard.writeText("alex@vierfrantz.com")}
           >
             alex@vierfrantz.com

src/components/modules/ScoreModule.tsx

@@ -38,7 +38,7 @@ export default function ScoreModule({ type }: { type: "sabres" | "bills" }) {
   }, []);
 
   return (
-    <div className="border border-white border-solid rounded-lg w-full sm:w-[500px] mb-4">
+    <div className="border border-white border-solid rounded-lg w-full mb-4">
       <div className="flex justify-between">
         <div>
           <img width="100" className="p-4" src={IMAGES[type]} />

src/pages/App.tsx

@@ -27,8 +27,8 @@ export default function App() {
         </Overlay>
       )}
 
-      <div className="my-2 flex flex-col items-center sm:justify-center">
+      <div className="my-2 mx-auto w-full sm:w-[500px]">
-        <div className="space-y-4 sm:w-[500px]">
+        <div className="space-y-4">
           <img
             className="rounded-lg"
             src={