feat(ScheduleFinderLive): more prominent cancelled stops

[thecristen]

Scope

Asana Ticket: [SF/UD] All Modes: Cross out the stop name as well as the time in trip details if a stop is skipped or a trip is cancelled

This has a bonus feature of adding a small "x" marker on the skipped stop marker.

Implementation

This also fixes a bug I found that I'd missed in reviewing #3009 - sometimes alerts have nil direction, and we should not exclude those from this page.

I don't love the CSS controlling the positioning of the "x" marker, but it's no less hacky than the "T" marker showing the current stop, so, eh?

Screenshots

How to test

Look for (or create) an active alert involving a stop closure, and then find it in Schedule Finder 2.0!

[lvachon1]

Thanks for fixing my bug, this looks great too!

[joshlarson]

I think this looks great!

I left a tiny code-style comment about variants. I think I do eventually want to pull the xmark into the <.lined_list_marker /> (and maybe give a similar treatment to the stop pin, though slightly different, because the stop pin is a decoration on top of the marker, rather than a whole different kind of marker), but IMO that can be done in this PR or as a follow-up.

[joshlarson]

Style nit: This feels like a new variant, not a separate attribute. That is, a lined_list_item isn't going to be both variant="mode" and stop_cancelled?=true.

As a variant, the xmark icon could then be lumped into the <.lined_list_marker />, and maybe centered explicitly, rather than through CSS magic values.

---

I won't pretend to be certain of this, but at very large font sizes, the xmark doesn't look vertically centered, and I wonder if that's because of the magic values?