未割り当て圃場に交互背景色を追加

行の対応が分かりにくい問題を解消するため、
偶数行/奇数行で白/グレーの交互背景色を適用。

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Akira
2026-03-02 09:54:04 +09:00
parent a331f8b30a
commit 8c47217003

View File

@@ -531,9 +531,9 @@ export default function DistributionEditPage({ planId }: Props) {
{unassignedFields.length > 0 && ( {unassignedFields.length > 0 && (
<div className="mt-4 border-t border-gray-200 pt-4"> <div className="mt-4 border-t border-gray-200 pt-4">
<p className="text-xs font-medium text-gray-500 uppercase mb-2"></p> <p className="text-xs font-medium text-gray-500 uppercase mb-2"></p>
<div className="space-y-1"> <div className="rounded border border-gray-200 overflow-hidden">
{unassignedFields.map(fi => ( {unassignedFields.map((fi, idx) => (
<div key={fi.id} className="flex items-center gap-2 text-sm"> <div key={fi.id} className={`flex items-center gap-2 text-sm px-3 py-1.5 ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`}>
<span className="text-gray-800 font-medium flex-1 min-w-0 truncate" title={fi.name}>{fi.name}</span> <span className="text-gray-800 font-medium flex-1 min-w-0 truncate" title={fi.name}>{fi.name}</span>
<span className="text-gray-400 text-xs w-16 shrink-0 text-right">{fi.area_tan}</span> <span className="text-gray-400 text-xs w-16 shrink-0 text-right">{fi.area_tan}</span>
<select <select