From 226c4f1444fb6ab66ef1bdc1c0e8d0fc7cfcd639 Mon Sep 17 00:00:00 2001
From: freedakgmail <freedak.gemini@gmail.com>
Date: Mon, 17 Aug 2026 20:10:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=8A=B1=E5=90=8D=E5=86=8C=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E5=88=97=E5=9C=A8=E8=81=8C/=E8=AF=95=E7=94=A8?=
 =?UTF-8?q?=E6=9C=9F=E5=88=86=E4=B8=A4=E8=A1=8C=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/Roster.tsx | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/Roster.tsx b/frontend/src/pages/Roster.tsx
index 1b99619..b3914e8 100644
--- a/frontend/src/pages/Roster.tsx
+++ b/frontend/src/pages/Roster.tsx
@@ -805,22 +805,24 @@ export default function Roster() {
                     </td>
                     {colVisible('department') && <td className="px-4 py-2.5 text-gray-500">{e.department}</td>}
                     {colVisible('status') && <td className="px-4 py-2.5">
-                      <span className={`px-2 py-0.5 rounded text-xs ${
-                        e.status === 'ACTIVE' ? 'bg-green-50 text-safe'
-                        : e.status === 'PRE_HIRE' ? 'bg-blue-50 text-blue-600'
-                        : 'bg-gray-100 text-gray-500'
-                      }`}>
-                        {e.status === 'ACTIVE' ? '在职' : e.status === 'PRE_HIRE' ? '预入职' : '离职'}
-                      </span>
-                      {e.probationInfo?.isProbation && (
-                        <span className={`ml-1 px-2 py-0.5 rounded text-xs ${
-                          e.probationInfo.isExpiring
-                            ? 'bg-orange-50 text-orange-700 border border-orange-200'
-                            : 'bg-amber-50 text-amber-700 border border-amber-200'
+                      <div className="flex flex-col gap-1">
+                        <span className={`px-2 py-0.5 rounded text-xs w-fit ${
+                          e.status === 'ACTIVE' ? 'bg-green-50 text-safe'
+                          : e.status === 'PRE_HIRE' ? 'bg-blue-50 text-blue-600'
+                          : 'bg-gray-100 text-gray-500'
                         }`}>
-                          试用期{e.probationInfo.isExpiring ? `即将到期(${e.probationInfo.daysToConfirm}天)` : `剩${e.probationInfo.daysToConfirm}天`}
+                          {e.status === 'ACTIVE' ? '在职' : e.status === 'PRE_HIRE' ? '预入职' : '离职'}
                         </span>
-                      )}
+                        {e.probationInfo?.isProbation && (
+                          <span className={`px-2 py-0.5 rounded text-xs w-fit ${
+                            e.probationInfo.isExpiring
+                              ? 'bg-orange-50 text-orange-700 border border-orange-200'
+                              : 'bg-amber-50 text-amber-700 border border-amber-200'
+                          }`}>
+                            试用期{e.probationInfo.isExpiring ? `即将到期(${e.probationInfo.daysToConfirm}天)` : `剩${e.probationInfo.daysToConfirm}天`}
+                          </span>
+                        )}
+                      </div>
                     </td>}
                     {colVisible('hireDate') && <td className="px-4 py-2.5 text-gray-500">{e.hireDate?.toString().slice(0, 10)}</td>}
                     <td className="hidden px-4 py-2.5 text-gray-500">