From b1b140194dbf4414c507f897bbd225cc2971bcb7 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Mon, 10 Apr 2023 20:54:28 +0800
Subject: [PATCH] fix: voice msg UI bugs

---
 src/common/component/VoiceMessage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/component/VoiceMessage.tsx b/src/common/component/VoiceMessage.tsx
index 26b26143..3f186f6f 100644
--- a/src/common/component/VoiceMessage.tsx
+++ b/src/common/component/VoiceMessage.tsx
@@ -95,11 +95,11 @@ const VoiceMessage = ({ file_path }: { file_path: string }) => {
             <button className='disabled:opacity-60' onClick={handleClick} disabled={notReady}>
                 {playing ? <IconPause className="stroke-primary-500" /> : <IconPlay className="stroke-primary-500" />}
             </button>
-            <div ref={containerRef} className={clsx('flex-1 h-8', notReady && "flex-center")} >
+            <div ref={containerRef} className={clsx('flex-1 h-8', notReady && "flex-center flex-1 whitespace-nowrap")} >
                 {status == "loading" && <span className='text-xs'>Loading voice message...</span>}
                 {status == "error" && <span className='text-xs text-red-800'>Load voice message error</span>}
             </div>
-            {status !== "error" && <time className='text-primary-500 text-xs whitespace-nowrap text-left'>{duration}'</time>}
+            {status !== "error" && <time className='text-primary-500 text-xs whitespace-nowrap text-left'>{duration}</time>}
             {status === "error" && <IconRefresh role="button" className="absolute -right-6 top-1/2 -translate-y-1/2 w-4 h-4 stroke-primary-600" onClick={handleReload} />}
         </div>
     );