From 623b562e8db416ab95e15b86338861f04051cab6 Mon Sep 17 00:00:00 2001
From: James Magahern <james@magahern.com>
Date: Fri, 27 Jun 2025 01:13:45 -0700
Subject: [PATCH] NowPlaying: appearance fixes for timestamp indicator

---
 frontend/src/components/NowPlaying.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/NowPlaying.tsx b/frontend/src/components/NowPlaying.tsx
index a635664..40a92b1 100644
--- a/frontend/src/components/NowPlaying.tsx
+++ b/frontend/src/components/NowPlaying.tsx
@@ -63,12 +63,12 @@ const NowPlaying: React.FC<NowPlayingProps> = (props) => {
       <div className="text-lg font-bold truncate">Screen Sharing</div>
     </div>
   ) : (
-    <div className={classNames(props.isIdle ? 'opacity-50' : 'opacity-100', "flex flex-row items-center justify-between w-full")}>
-        <div>
+    <div className={classNames(props.isIdle ? 'opacity-50' : 'opacity-100', "flex flex-row items-center justify-between gap-2 w-full")}>
+        <div className="truncate">
             <div className="text-lg font-bold truncate">{props.songName}</div>
             <div className="text-sm truncate">{props.fileName}</div>
         </div>
-        <div className="text-sm opacity-50">
+        <div className="text-sm opacity-50 shrink-0">
             {props.timePosition && props.duration ? 
               (props.seekable ? `${formatTime(props.timePosition)} / ${formatTime(props.duration)}`
                               : `${formatTime(props.timePosition)}` )