refactor: use class helper instead of component to handle responsiveness

src/components/Music/index.tsx

@@ -4,12 +4,12 @@ import { Kitty } from "../Kitty";
 import { SpotifyPlayer } from "./SpotifyPlayer";
 import { Cava } from "./Cava";
 import { useApp } from "~/hooks/useApp";
-import { Responsive } from "../Responsive";
+import { cn, hideIf } from "~/utils/react";
 
 const song = "/audio/asinine-vivement-quoi.mp3";
 
 export const Music = () => {
-  const { volume } = useApp();
+  const { volume, screenWidth } = useApp();
 
   const audio = useRef<HTMLAudioElement>(null);
 
@@ -55,7 +55,13 @@ export const Music = () => {
       <audio ref={audio} src={song} onTimeUpdate={handleTimeUpdate} loop />
       {audio.current && metadata ? (
         <>
-          <Kitty className="h-full w-1/2 pb-2 pl-2 pr-1 pt-1" rows={5}>
+          <Kitty
+            className={cn(
+              "h-full pb-2 pl-2 pr-1 pt-1",
+              screenWidth < 900 ? "w-full" : "w-1/2",
+            )}
+            rows={5}
+          >
             <SpotifyPlayer
               title={metadata.common.title ?? "Unknown"}
               artist={metadata.common.artist ?? "Unknown"}
@@ -66,7 +72,13 @@ export const Music = () => {
             />
           </Kitty>
 
-          <Kitty className="h-full w-1/2 pb-2 pl-1 pr-2 pt-1" rows={5}>
+          <Kitty
+            className={cn(
+              "h-full w-1/2 pb-2 pl-1 pr-2 pt-1",
+              hideIf(screenWidth < 900),
+            )}
+            rows={5}
+          >
             <Cava audio={audio} />
           </Kitty>
         </>