audio streaming app
plyr.fm
fix: align action icon with header avatar — center 14px icon in 20px space (#1014)
the header avatar is 20px and the action icon is 14px, so the text
on each line started at different horizontal positions. 3px horizontal
margin on the icon centers it in the same 20px space as the avatar,
aligning the text columns.
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
authored by
Claude Opus 4.6
and committed by
GitHub
83ef52e5
f5b7e162
+4
-1
frontend/src/routes/activity/+page.svelte
+4
-1
frontend/src/routes/activity/+page.svelte
···
425
font-size: var(--text-sm); color: var(--text-tertiary); margin: 0;
426
line-height: 1.2; display: flex; align-items: center; gap: 0.375rem;
427
}
428
-
.action-icon { flex-shrink: 0; opacity: 0.6; color: var(--type-color); line-height: 0; }
429
.verb {
430
font-size: var(--text-xs);
431
color: color-mix(in srgb, var(--text-tertiary) 70%, var(--accent));
···
425
font-size: var(--text-sm); color: var(--text-tertiary); margin: 0;
426
line-height: 1.2; display: flex; align-items: center; gap: 0.375rem;
427
}
428
+
.action-icon {
429
+
flex-shrink: 0; opacity: 0.6; color: var(--type-color); line-height: 0;
430
+
margin: 0 3px; /* center 14px icon in 20px space to align with header avatar */
431
+
}
432
.verb {
433
font-size: var(--text-xs);
434
color: color-mix(in srgb, var(--text-tertiary) 70%, var(--accent));