Calendar Note card: icon and title misaligned (title centred away from icon) #1117

Open
opened 2026-10-05 07:39:54 +00:00 by kayg · 2 comments
Owner

Owner report (2026-10-05, screenshot)

The Note attachment card in the Calendar grid ("new note?") shows its icon at the top-left and the title centred far to the right with a large gap, so icon and title are not aligned. Title must sit next to the icon on one baseline with the standard gap, left-aligned, truncating with an ellipsis; same in every Calendar card kind.

## Owner report (2026-10-05, screenshot) The Note attachment card in the Calendar grid ("new note?") shows its icon at the top-left and the title centred far to the right with a large gap, so icon and title are not aligned. Title must sit next to the icon on one baseline with the standard gap, left-aligned, truncating with an ellipsis; same in every Calendar card kind.
Author
Owner

Starting work on branch job/calcards-1115, based on dev at 27644444a9. The UI already uses the shared ItemCard; I am checking how its host styles affect its flex alignment before changing the shared layout.

Starting work on branch job/calcards-1115, based on dev at 27644444a91dad244073113b0ec8ec7a61f2a212. The UI already uses the shared ItemCard; I am checking how its host styles affect its flex alignment before changing the shared layout.
Author
Owner

Finding and fix: the Calendar grid host is a native button, and the shared ItemCard did not set its own text alignment, so its Note title inherited centered button text and drifted away from the left glyph. ItemCard now sets text-align: start; its existing cap-height glyph box, one-line ellipsis, and shared use across Calendar card kinds remain in place. Focused verification: bunx vitest run src/lib/calendar/representation.svelte.test.ts --maxWorkers=2 passed (1 file, 7 tests); direct Svelte check found 0 errors and 4 existing warnings. bun run check remains blocked by the stale app-sidebar perf-lint exception reported on #1115.

Finding and fix: the Calendar grid host is a native button, and the shared ItemCard did not set its own text alignment, so its Note title inherited centered button text and drifted away from the left glyph. ItemCard now sets `text-align: start`; its existing cap-height glyph box, one-line ellipsis, and shared use across Calendar card kinds remain in place. Focused verification: `bunx vitest run src/lib/calendar/representation.svelte.test.ts --maxWorkers=2` passed (1 file, 7 tests); direct Svelte check found 0 errors and 4 existing warnings. `bun run check` remains blocked by the stale app-sidebar perf-lint exception reported on #1115.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal#1117
No description provided.