From a66bf59a55f33d80531eb23f15fdf5b85a12fa98 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 13 Oct 2025 18:20:13 +0000
Subject: [PATCH] Fix stretched badge image

---
 src/components/moderation/SpecialFieldDisplay.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/moderation/SpecialFieldDisplay.tsx b/src/components/moderation/SpecialFieldDisplay.tsx
index 0fd1a200..09d67bcf 100644
--- a/src/components/moderation/SpecialFieldDisplay.tsx
+++ b/src/components/moderation/SpecialFieldDisplay.tsx
@@ -160,24 +160,24 @@ function StatusFieldDisplay({ change, compact }: { change: FieldChange; compact:
       
       {change.changeType === 'modified' && (
         <div className="flex items-center gap-3">
-          <Badge className={`${getStatusColor(change.oldValue)} line-through`}>
+          <Badge className={`${getStatusColor(change.oldValue)} line-through w-fit shrink-0`}>
             {formatFieldValue(change.oldValue)}
           </Badge>
           <ArrowRight className="h-3 w-3 text-muted-foreground" />
-          <Badge className={getStatusColor(change.newValue)}>
+          <Badge className={`${getStatusColor(change.newValue)} w-fit shrink-0`}>
             {formatFieldValue(change.newValue)}
           </Badge>
         </div>
       )}
 
       {change.changeType === 'added' && (
-        <Badge className={getStatusColor(change.newValue)}>
+        <Badge className={`${getStatusColor(change.newValue)} w-fit shrink-0`}>
           {formatFieldValue(change.newValue)}
         </Badge>
       )}
 
       {change.changeType === 'removed' && (
-        <Badge className={`${getStatusColor(change.oldValue)} line-through opacity-75`}>
+        <Badge className={`${getStatusColor(change.oldValue)} line-through opacity-75 w-fit shrink-0`}>
           {formatFieldValue(change.oldValue)}
         </Badge>
       )}