Fix rubric layout: points left, description right

Reorder rubric columns so points appear on the left and the description
is left-aligned on the right. Extra credit gets its own dedicated column.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jonathan Allen
2026-02-19 17:29:09 -07:00
parent 9ce42c21f9
commit 07155991aa

View File

@@ -75,15 +75,14 @@ export default function AssignmentPreview({
{extraPoints !== 0 && ( {extraPoints !== 0 && (
<h5 className="text-center">{extraPoints} Extra Credit Points</h5> <h5 className="text-center">{extraPoints} Extra Credit Points</h5>
)} )}
<div className="grid grid-cols-3"> <div className="grid grid-cols-4">
{assignment.rubric.map((rubricItem, i) => ( {assignment.rubric.map((rubricItem, i) => (
<Fragment key={rubricItem.label + i}> <Fragment key={rubricItem.label + i}>
<div className="text-end pe-3 col-span-2">{rubricItem.label}</div> <div className="text-end pe-1">
<div> {rubricItemIsExtraCredit(rubricItem) ? "Extra Credit" : ""}
{rubricItem.points}
{rubricItemIsExtraCredit(rubricItem) ? " - Extra Credit" : ""}
</div> </div>
<div className="text-end pe-3">{rubricItem.points}</div>
<div className="col-span-2">{rubricItem.label}</div>
</Fragment> </Fragment>
))} ))}
</div> </div>