Commit 34283d42 by luoqi

fix(web): 召回池行 hover 不再位移(认领按钮与状态药丸叠同格切 visibility)

原实现 hover 时「认领」按钮 group-hover:inline-block 冒出、StatusPill group-hover:hidden 藏起,
二者尺寸不同 → 右块宽度变 → flex-1 诊所名重排,整行看着位移。
改为二者叠在同一 grid 格,槽位恒为较大值,hover 只切 visibility(非 display),零重排。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
parent 6f971dfd
Pipeline #3374 failed in 0 seconds
......@@ -533,21 +533,23 @@ function PatientRow({
)}
<span className="ml-auto flex-none" />
{onClaim ? (
<>
// 药丸与「认领」按钮叠在同一 grid 格:槽位宽/高恒为两者较大值,hover 只切 visibility
// (非 display),不改变布局 → 悬停时整行不重排、不位移。
<span className="grid flex-none items-center justify-items-end">
<span className="col-start-1 row-start-1 group-hover:invisible">
<StatusPill status={p.status} />
</span>
<button
type="button"
onClick={(e) => {
e.stopPropagation();
onClaim();
}}
className="hidden flex-none rounded-md bg-teal-600 px-2 py-0.5 text-[10.5px] font-medium text-white hover:bg-teal-700 group-hover:inline-block"
className="invisible col-start-1 row-start-1 whitespace-nowrap rounded-md bg-teal-600 px-2 py-0.5 text-[10.5px] font-medium text-white hover:bg-teal-700 group-hover:visible"
>
认领
</button>
<span className="group-hover:hidden">
<StatusPill status={p.status} />
</span>
</>
</span>
) : (
<StatusPill status={p.status} />
)}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment