Skip to content

Commit f08de6c

Browse files
dbutenhofdbutenhof
committed
further compaction & readability
1 parent 47581e8 commit f08de6c

1 file changed

Lines changed: 125 additions & 91 deletions

File tree

‎frontend/src/components/IssueCard.jsx‎

Lines changed: 125 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -808,9 +808,10 @@ const IssueCard = ({ issue, onMilestoneChange, onIssueUpdate }) => {
808808
<div
809809
style={{
810810
display: 'flex',
811-
flexDirection: 'column',
812-
alignItems: 'flex-start',
813-
gap: '0.25rem',
811+
flexDirection: 'row',
812+
alignItems: 'center',
813+
gap: '0.5rem',
814+
flexWrap: 'wrap',
814815
}}
815816
>
816817
{issue.user ? (
@@ -821,33 +822,42 @@ const IssueCard = ({ issue, onMilestoneChange, onIssueUpdate }) => {
821822
rel="noopener noreferrer"
822823
style={{
823824
textDecoration: 'none',
824-
display: 'flex',
825+
display: 'inline-flex',
825826
alignItems: 'center',
827+
gap: '0.35rem',
828+
color: '#0066cc',
826829
}}
827830
>
828-
<UserAvatar user={issue.user} size={32} />
831+
<UserAvatar user={issue.user} size={28} />
832+
<span style={{ fontSize: '0.875rem', fontWeight: '500' }}>
833+
{issue.user.login || 'Unknown'}
834+
</span>
829835
</a>
830836
) : (
831-
<UserAvatar user={issue.user} size={32} />
837+
<span
838+
style={{
839+
display: 'inline-flex',
840+
alignItems: 'center',
841+
gap: '0.35rem',
842+
}}
843+
>
844+
<UserAvatar user={issue.user} size={28} />
845+
<span style={{ fontSize: '0.875rem', fontWeight: '500' }}>
846+
{issue.user.login || 'Unknown'}
847+
</span>
848+
</span>
832849
)
833850
) : (
834851
<span style={{ fontSize: '0.875rem', color: '#6a6e73' }}>
835852
Unknown
836853
</span>
837854
)}
838-
<span
839-
style={{
840-
fontSize: '0.75rem',
841-
color: '#6a6e73',
842-
}}
843-
>
844-
{formatDate(issue.created_at)} ({daysSince} days ago)
845-
</span>
846855
<div
847856
ref={assigneesToggleRef}
848857
style={{
849858
position: 'relative',
850-
display: 'inline-block',
859+
display: 'inline-flex',
860+
alignItems: 'center',
851861
}}
852862
>
853863
<Button
@@ -862,14 +872,27 @@ const IssueCard = ({ issue, onMilestoneChange, onIssueUpdate }) => {
862872
}
863873
}}
864874
style={{
865-
padding: '0.25rem 0.75rem',
875+
padding: '0.125rem 0.5rem',
866876
fontSize: '0.75rem',
867877
minWidth: 'auto',
878+
display: 'inline-flex',
879+
alignItems: 'center',
880+
gap: '0.35rem',
868881
}}
869882
>
870-
{currentAssignees.length > 0
871-
? `Assigned to ${currentAssignees.map((a) => a.login).join(', ')}`
872-
: 'Unassigned'}
883+
{currentAssignees.length > 0 ? (
884+
<>
885+
{currentAssignees.map((a) => (
886+
<UserAvatar key={a.login} user={a} size={18} />
887+
))}
888+
<span>
889+
Assigned to{' '}
890+
{currentAssignees.map((a) => a.login).join(', ')}
891+
</span>
892+
</>
893+
) : (
894+
'Unassigned'
895+
)}
873896
</Button>
874897
{isAssigneesMenuOpen && (
875898
<div
@@ -1035,6 +1058,16 @@ const IssueCard = ({ issue, onMilestoneChange, onIssueUpdate }) => {
10351058
)}
10361059
</div>
10371060
</div>
1061+
<span
1062+
style={{
1063+
display: 'block',
1064+
fontSize: '0.7rem',
1065+
color: '#6a6e73',
1066+
marginTop: '0.2rem',
1067+
}}
1068+
>
1069+
{formatDate(issue.created_at)} ({daysSince} days ago)
1070+
</span>
10381071
</td>
10391072

10401073
{/* Column 4: PR icon or closed by #pr or blank */}
@@ -1138,83 +1171,37 @@ const IssueCard = ({ issue, onMilestoneChange, onIssueUpdate }) => {
11381171
</div>
11391172
</td>
11401173

1141-
{/* Column 6: Label chiclets stacked vertically */}
1174+
{/* Column 6: Label chiclets - flow side-by-side when they fit */}
11421175
<td style={cellStyle}>
11431176
<div
11441177
style={{
11451178
display: 'flex',
1146-
flexDirection: 'column',
1179+
flexDirection: 'row',
1180+
flexWrap: 'wrap',
11471181
gap: '0.25rem',
1148-
alignItems: 'flex-start',
1182+
alignItems: 'center',
11491183
}}
11501184
>
1151-
{currentLabels.map((label) => (
1152-
<Tooltip
1153-
key={label.id || label.name}
1154-
content={label.description || ''}
1155-
>
1156-
<span
1157-
style={{
1158-
display: 'inline-flex',
1159-
alignItems: 'center',
1160-
gap: '0.25rem',
1161-
padding: '0.125rem 0.25rem 0.125rem 0.5rem',
1162-
fontSize: '0.75rem',
1163-
fontWeight: '500',
1164-
borderRadius: '0.25rem',
1165-
backgroundColor: `#${label.color}`,
1166-
color: getContrastColor(label.color),
1167-
whiteSpace: 'nowrap',
1168-
cursor: label.description ? 'help' : 'default',
1169-
}}
1170-
>
1171-
{label.name}
1172-
<button
1173-
onClick={(e) => {
1174-
e.stopPropagation();
1175-
handleRemoveLabel(label.name);
1176-
}}
1177-
style={{
1178-
background: 'none',
1179-
border: 'none',
1180-
color: getContrastColor(label.color),
1181-
cursor: 'pointer',
1182-
padding: '0',
1183-
fontSize: '0.875rem',
1184-
lineHeight: '1',
1185-
display: 'flex',
1186-
alignItems: 'center',
1187-
justifyContent: 'center',
1188-
width: '16px',
1189-
height: '16px',
1190-
}}
1191-
aria-label={`Remove ${label.name} label`}
1192-
>
1193-
×
1194-
</button>
1195-
</span>
1196-
</Tooltip>
1197-
))}
1198-
<div
1199-
ref={toggleRef}
1200-
style={{ position: 'relative', display: 'inline-block' }}
1185+
<div
1186+
ref={toggleRef}
1187+
style={{ position: 'relative', display: 'inline-block' }}
1188+
>
1189+
<Button
1190+
variant="secondary"
1191+
onClick={() => {
1192+
setIsLabelMenuOpen(!isLabelMenuOpen);
1193+
if (isLabelMenuOpen) {
1194+
setLabelSearchFilter('');
1195+
}
1196+
}}
1197+
style={{
1198+
padding: '0.125rem 0.5rem',
1199+
fontSize: '0.75rem',
1200+
minWidth: 'auto',
1201+
}}
12011202
>
1202-
<Button
1203-
variant="secondary"
1204-
onClick={() => {
1205-
setIsLabelMenuOpen(!isLabelMenuOpen);
1206-
if (isLabelMenuOpen) {
1207-
setLabelSearchFilter('');
1208-
}
1209-
}}
1210-
style={{
1211-
padding: '0.125rem 0.5rem',
1212-
fontSize: '0.75rem',
1213-
minWidth: 'auto',
1214-
}}
1215-
>
1216-
+
1217-
</Button>
1203+
+
1204+
</Button>
12181205
{isLabelMenuOpen && (
12191206
<div
12201207
ref={menuRef}
@@ -1402,8 +1389,55 @@ const IssueCard = ({ issue, onMilestoneChange, onIssueUpdate }) => {
14021389
</div>
14031390
</div>
14041391
)}
1405-
</div>
14061392
</div>
1393+
{currentLabels.map((label) => (
1394+
<Tooltip
1395+
key={label.id || label.name}
1396+
content={label.description || ''}
1397+
>
1398+
<span
1399+
style={{
1400+
display: 'inline-flex',
1401+
alignItems: 'center',
1402+
gap: '0.25rem',
1403+
padding: '0.125rem 0.25rem 0.125rem 0.5rem',
1404+
fontSize: '0.75rem',
1405+
fontWeight: '500',
1406+
borderRadius: '0.25rem',
1407+
backgroundColor: `#${label.color}`,
1408+
color: getContrastColor(label.color),
1409+
whiteSpace: 'nowrap',
1410+
cursor: label.description ? 'help' : 'default',
1411+
}}
1412+
>
1413+
{label.name}
1414+
<button
1415+
onClick={(e) => {
1416+
e.stopPropagation();
1417+
handleRemoveLabel(label.name);
1418+
}}
1419+
style={{
1420+
background: 'none',
1421+
border: 'none',
1422+
color: getContrastColor(label.color),
1423+
cursor: 'pointer',
1424+
padding: '0',
1425+
fontSize: '0.875rem',
1426+
lineHeight: '1',
1427+
display: 'flex',
1428+
alignItems: 'center',
1429+
justifyContent: 'center',
1430+
width: '16px',
1431+
height: '16px',
1432+
}}
1433+
aria-label={`Remove ${label.name} label`}
1434+
>
1435+
×
1436+
</button>
1437+
</span>
1438+
</Tooltip>
1439+
))}
1440+
</div>
14071441
</td>
14081442

14091443
{/* Column 7: Issue title - wraps to fit page width */}
@@ -1414,13 +1448,12 @@ const IssueCard = ({ issue, onMilestoneChange, onIssueUpdate }) => {
14141448
overflowWrap: 'break-word',
14151449
}}
14161450
>
1417-
<span style={{ fontWeight: '500' }}>{issue.title}</span>
14181451
{issue.type && (
14191452
<Tooltip content={issue.type.description || ''}>
14201453
<span
14211454
style={{
14221455
display: 'inline-block',
1423-
marginLeft: '0.5rem',
1456+
marginRight: '0.5rem',
14241457
padding: '0.125rem 0.5rem',
14251458
fontSize: '0.75rem',
14261459
fontWeight: '500',
@@ -1435,6 +1468,7 @@ const IssueCard = ({ issue, onMilestoneChange, onIssueUpdate }) => {
14351468
</span>
14361469
</Tooltip>
14371470
)}
1471+
<span style={{ fontWeight: '500' }}>{issue.title}</span>
14381472
</td>
14391473
</tr>
14401474

0 commit comments

Comments
 (0)