feat: use new way to work with group sizes

src/App.tsx

@@ -1,7 +1,5 @@
 import { BrowserRouter } from "react-router-dom";
 import { MusicPlayer } from "./components/MusicPlayer";
-import { MusicVisualizer } from "./components/MusicVisualizer";
-import { Nvim } from "./components/Nvim/Nvim";
 import { Kitty } from "./components/Kitty";
 import { AppContextProvider } from "./context/AppContext";
 import { Waybar } from "./components/Waybar/Waybar";
@@ -19,7 +17,7 @@ function App() {
 
           <Kitty className="flex-1"></Kitty>
 
-          <div className="flex gap-3 h-[142px]">
+          <div className="flex h-[142px] gap-3">
             <Kitty className="flex-1 select-none">
               <MusicPlayer
                 title="Last Tango in Kyoto"

src/components/Kitty.tsx

@@ -10,6 +10,6 @@ export const Kitty = (props: { children?: ReactNode; className?: string }) => (
     )}
     style={{ backdropFilter: "blur(2px)" }}
   >
-    <Terminal>{props.children}</Terminal>
+    <Terminal font="20px JetbrainsMono">{props.children}</Terminal>
   </div>
 );

src/components/MusicPlayer.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Bar, Frame, Group, Terminal, Text, useTerminal } from "react-dom-curse";
+import { Bar, Frame, Group, Text, useTerminal } from "react-dom-curse";
 import { theme } from "~/utils/theme";
 
 const formatDurationMSS = (duration: number) => {
@@ -15,7 +15,7 @@ export const MusicPlayer = (props: {
   album: string;
   duration: number;
 }) => {
-  const { terminal } = useTerminal();
+  const { width } = useTerminal();
 
   const [played, setPlayed] = useState(0);
   useEffect(() => {
@@ -31,53 +31,55 @@ export const MusicPlayer = (props: {
   )}`;
 
   return (
-      <Group
-        x={0}
-        y={0}
-        width={terminal.width}
-        height={terminal.height}
-        style={{ foreground: theme.white }}
-      >
-        <Frame
-          x={0}
-          y={0}
-          width={terminal.width}
-          height={terminal.height}
-          border="single"
-        >
-          <Text x={0} y={0} style={{ foreground: theme.cyan }}>
-            {props.title} · {props.artist}
-          </Text>
-          <Text x={0} y={1} style={{ foreground: theme.yellow }}>
-            {props.album}
-          </Text>
-
-          <Group x={0} y={2} width={terminal.width} height={1}>
-            <Bar
-              x={0}
-              y={0}
-              style={{ foreground: theme.green, background: "#55576d" }}
-              char=" "
-              size={terminal.width}
-              direction="horizontal"
-            />
-            <Bar
-              x={0}
-              y={0}
-              style={{ foreground: "#55576d", background: theme.green }}
-              char=" "
-              size={terminal.width * (played / props.duration)}
-              direction="horizontal"
-            />
-            <Text x={Math.floor(terminal.width / 2 - time.length / 2)} y={0}>
-              {time}
-            </Text>
-          </Group>
-        </Frame>
-
-        <Text x={1} y={0} style={{ foreground: theme.magenta }}>
-          Playback
+    <Group
+      x={0}
+      y={0}
+      width={width}
+      height={5}
+      style={{ foreground: theme.white }}
+    >
+      <Frame x={0} y={0} width={width} height={5} border="single">
+        <Text x={0} y={0} style={{ foreground: theme.cyan, bold: true }}>
+          {props.title} · {props.artist}
         </Text>
-      </Group>
+        <Text x={0} y={1} style={{ foreground: theme.yellow }}>
+          {props.album}
+        </Text>
+
+        <Group x={0} y={2} width={width} height={1}>
+          <Bar
+            x={0}
+            y={0}
+            style={{
+              foreground: theme.green,
+              background: "#55576d",
+              bold: true,
+            }}
+            char=" "
+            size={width}
+            direction="horizontal"
+          />
+          <Bar
+            x={0}
+            y={0}
+            style={{
+              foreground: "#55576d",
+              background: theme.green,
+              bold: true,
+            }}
+            char=" "
+            size={width * (played / props.duration)}
+            direction="horizontal"
+          />
+          <Text x={Math.floor(width / 2 - time.length / 2 - 1)} y={0}>
+            {time}
+          </Text>
+        </Group>
+      </Frame>
+
+      <Text x={1} y={0} style={{ foreground: theme.magenta }}>
+        {"Playback".substring(0, Math.min(8, width - 2))}
+      </Text>
+    </Group>
   );
 };