1694820 - Calendar: time and event name not vertically aligned

Status: RESOLVED FIXED

(Calendar :: Calendar Frontend, defect, P2)

Description

[Tim]

Attachment: not-aligned.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36

Steps to reproduce:

Open the Calendar tab and view the difference between a time-ranged event versus an all-day event. Please see my attached screenshot.

I'm using Thunderbird 78.8.0 (32-bit), on Windows 10 20H2.

Actual results:

For time-ranged events, the time and event name are not vertically aligned with each other. There's about a 2-pixel shift in positioning.

Expected results:

The time and event name should be vertically aligned.

Comment 1

[WaltS48 [:walts48]]

It appears I can reproduce this using 78.8.0 on Fedora 33 Workstation. Had to look very hard and hide the Calendar and Today pane on my 19" monitor.

Comment 2

[Henry Wilkes (they/them) [:henry-x]]

I wouldn't mind fixing this as part of a broader restructuring of all-day, week/day-view, and multiweek/month-view items. The icons (alarm, arrows, privacy) are also misaligned, there is weird padding (e.g. in the multiweek view, all-day events are not aligned horizontally with the start time of other events), and cropping effects when the items are squashed. All-day boxes are also broken for showing event locations (through the preference).

I think they could all benefit from a single grid layout, rather than the various vbox and hboxes we have now.

Comment 3

[Henry Wilkes (they/them) [:henry-x]]

Attachment: Bug 1694820 - Structurally simplify calendar event items. r=darktrojan

Used HTML and CSS to reduce nesting of elements and tidying their styling.

Also, made month and multiweek views more semantically correct by placing the "days of the week" headers within the table, and restyled it as a CSS grid.
Also, placed the month day event items within an <ol> element.

Also, renamed some classes to make them more meaningful.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/09a03ca922ba
Structurally simplify calendar event items. r=darktrojan