fix: align detail scale adjust buttons

This commit is contained in:
134 2026-06-22 18:30:03 +08:00
parent d34e6c8344
commit 47c7da3a1f

View File

@ -1483,10 +1483,13 @@ function DetailResultLocalEditDialog({
{DETAIL_SCALE_ADJUST_OPTIONS.map((option) => {
const active = selectedScalePercent === option;
const Icon = option > 0 ? Maximize2 : Minimize2;
const labelAction = option > 0 ? "放大" : "缩小";
const labelValue = `${Math.abs(option)}%`;
return (
<button
aria-label={getDetailScaleAdjustLabel(option)}
className={cn(
"inline-flex h-10 items-center justify-center gap-1.5 rounded-full border text-xs font-semibold transition disabled:cursor-not-allowed disabled:opacity-45",
"grid h-12 grid-cols-[16px_minmax(0,1fr)] items-center gap-1 rounded-full border px-2 text-xs font-semibold leading-none transition disabled:cursor-not-allowed disabled:opacity-45",
active
? "border-emerald-300/70 bg-emerald-400/18 text-emerald-50"
: "border-white/10 bg-black/20 text-white/68 hover:border-white/24 hover:bg-white/[0.08] hover:text-white"
@ -1496,8 +1499,11 @@ function DetailResultLocalEditDialog({
onClick={() => setSelectedScalePercent(option)}
type="button"
>
<Icon className="h-3.5 w-3.5" />
{getDetailScaleAdjustLabel(option)}
<Icon className="h-3.5 w-3.5 justify-self-center" />
<span className="flex min-w-0 flex-col items-center justify-center gap-0.5 text-center leading-[1.08]">
<span>{labelAction}</span>
<span>{labelValue}</span>
</span>
</button>
);
})}