From af01392f202a699ddc25a11230499f99d34cff19 Mon Sep 17 00:00:00 2001
From: Alex Frantz <alex@alexav.gg>
Date: Sun, 27 Apr 2025 23:02:01 -0400
Subject: [PATCH] truncate music name if too long

---
 src/App.tsx                       |   4 +-
 src/components/MusicComponent.tsx | 112 +++++++++++++++---------------
 2 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9e30e9a..c174442 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -142,8 +142,8 @@ export default function MouseFlashlight() {
           </div>
         </div>
 
-        <div className="border border-white border-solid rounded-lg w-full sm:w-[500px]">
-          <div className="grid grid-cols-1 xs:grid-cols-2 p-2">
+        <div className="border border-white border-solid rounded-lg w-full sm:w-[500px] p-2">
+          <div className="grid grid-cols-1 xs:grid-cols-2">
             <div className="mx-auto">
               <div>
                 <h1 className="text-2xl font-bold italic opacity-95 inline">
diff --git a/src/components/MusicComponent.tsx b/src/components/MusicComponent.tsx
index d391603..6a6c584 100644
--- a/src/components/MusicComponent.tsx
+++ b/src/components/MusicComponent.tsx
@@ -1,63 +1,63 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
 type MusicObject = {
-    artist: {
-        mbid: string,
-        "#text": string
-    },
-    name: string,
-    image: ImageObject[],
-    url: string
-}
+  artist: {
+    mbid: string;
+    "#text": string;
+  };
+  name: string;
+  image: ImageObject[];
+  url: string;
+};
 type ImageObject = {
-    size: "small" | "medium" | "large" | "extralarge",
-    "#text": string
-}
+  size: "small" | "medium" | "large" | "extralarge";
+  "#text": string;
+};
 
 export default function MusicComponent() {
-    const [ music, setMusic ] = useState<MusicObject | null>(null);
-    const [ failedFetch, setFailedFetch ] = useState(false);
+  const [music, setMusic] = useState<MusicObject | null>(null);
+  const [failedFetch, setFailedFetch] = useState(false);
 
-    useEffect(() => {
-        async function fetchMusic() {
-            const response = await fetch("https://api.alexav.gg/v4/social/music")
-            if (response.ok) {
-                const data = await response.json()
-                setMusic(data.data.tracks[0] as MusicObject)
-            } else setFailedFetch(true)
-        }
-
-        setTimeout(() => {
-            fetchMusic()
-        }, 60000)
-        fetchMusic()
-    }, [])
-
-    if (music) {
-        return (
-            <div className="flex align-middle">
-                <img width="50" src={music.image[1]['#text']} />
-                <div className="pl-2">
-                    <h1>{music.name}</h1>
-                    <p>{music.artist['#text']}</p>
-                </div>
-            </div>
-        )
-    } else {
-        if (failedFetch) {
-            return (
-                <div>
-                    <h1>uh oh!</h1>
-                    <p>failed to get music :(</p>
-                </div>
-            )
-        } else {
-            return (
-                <div>
-                    <h1>loading music..</h1>
-                    <p>loading artist..</p>
-                </div>
-            )
-        }
+  useEffect(() => {
+    async function fetchMusic() {
+      const response = await fetch("https://api.alexav.gg/v4/social/music");
+      if (response.ok) {
+        const data = await response.json();
+        setMusic(data.data.tracks[0] as MusicObject);
+      } else setFailedFetch(true);
     }
-}
\ No newline at end of file
+
+    setTimeout(() => {
+      fetchMusic();
+    }, 60000);
+    fetchMusic();
+  }, []);
+
+  if (music) {
+    return (
+      <div className="flex align-middle">
+        <img width="50" src={music.image[1]["#text"]} />
+        <div className="pl-2 max-w-25">
+          <h1 className="truncate">{music.name}</h1>
+          <p className="truncate">{music.artist["#text"]}</p>
+        </div>
+      </div>
+    );
+  } else {
+    if (failedFetch) {
+      return (
+        <div>
+          <h1>uh oh!</h1>
+          <p>failed to get music :(</p>
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <h1>loading music..</h1>
+          <p>loading artist..</p>
+        </div>
+      );
+    }
+  }
+}