From a80aacce5abbe837aca573040f7119e73b1dfddc Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Sat, 21 Dec 2024 21:44:16 +0800
Subject: [PATCH] Refactor MessageHide component layout to improve badge
 visibility; separate message text and badge into distinct sections for better
 user experience

---
 src/messageHide.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/messageHide.tsx b/src/messageHide.tsx
index 3f11728..63c63da 100644
--- a/src/messageHide.tsx
+++ b/src/messageHide.tsx
@@ -8,9 +8,13 @@ interface Props {
 
 export function MessageHide({ chat }: Props) {
   return (
-    <div className="flex items-center gap-2 text-sm text-muted-foreground">
-      <span>{getMessageText(chat).split("\n")[0].slice(0, 18)} ...</span>
-      <Badge variant="secondary">Removed from context</Badge>
-    </div>
+    <>
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <span>{getMessageText(chat).split("\n")[0].slice(0, 18)} ...</span>
+      </div>
+      <div className="flex justify-center">
+        <Badge variant="destructive">Removed from context</Badge>
+      </div>
+    </>
   );
 }