Align assignee/reviewer/approver pills vertically in new-issue dialog

Give the leading element of each row (the "For" text and the
Eye/ShieldCheck icons) a fixed w-6 width so all InlineEntitySelector
pills start at the same horizontal position.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-04-06 20:17:08 -05:00
parent e7fe02c02f
commit ff333d6828

View file

@ -1100,7 +1100,7 @@ export function NewIssueDialog() {
<div className="px-4 pb-2 shrink-0"> <div className="px-4 pb-2 shrink-0">
<div className="overflow-x-auto overscroll-x-contain"> <div className="overflow-x-auto overscroll-x-contain">
<div className="inline-flex items-center gap-2 text-sm text-muted-foreground flex-wrap sm:flex-nowrap sm:min-w-max"> <div className="inline-flex items-center gap-2 text-sm text-muted-foreground flex-wrap sm:flex-nowrap sm:min-w-max">
<span>For</span> <span className="w-6 shrink-0 text-center">For</span>
<InlineEntitySelector <InlineEntitySelector
ref={assigneeSelectorRef} ref={assigneeSelectorRef}
value={assigneeValue} value={assigneeValue}
@ -1241,7 +1241,7 @@ export function NewIssueDialog() {
{/* Reviewer row */} {/* Reviewer row */}
{showReviewerRow && ( {showReviewerRow && (
<div className="flex items-center gap-2 text-sm text-muted-foreground mt-1"> <div className="flex items-center gap-2 text-sm text-muted-foreground mt-1">
<Eye className="h-3.5 w-3.5 shrink-0" /> <span className="w-6 shrink-0 flex items-center justify-center"><Eye className="h-3.5 w-3.5" /></span>
<InlineEntitySelector <InlineEntitySelector
value={reviewerValue} value={reviewerValue}
options={assigneeOptions} options={assigneeOptions}
@ -1285,7 +1285,7 @@ export function NewIssueDialog() {
{/* Approver row */} {/* Approver row */}
{showApproverRow && ( {showApproverRow && (
<div className="flex items-center gap-2 text-sm text-muted-foreground mt-1"> <div className="flex items-center gap-2 text-sm text-muted-foreground mt-1">
<ShieldCheck className="h-3.5 w-3.5 shrink-0" /> <span className="w-6 shrink-0 flex items-center justify-center"><ShieldCheck className="h-3.5 w-3.5" /></span>
<InlineEntitySelector <InlineEntitySelector
value={approverValue} value={approverValue}
options={assigneeOptions} options={assigneeOptions}