Calendar module: Vertical alignment with wrapping

[MikeBishop]

Platform: MM2 running on Raspberry Pi 4, Bullseye

Node Version: 16.19.0

MagicMirror² Version: 2.22.0

Description: When calendar events are long enough to wrap, the event name does not have the same vertical alignment as the icon and the time string.

Steps to Reproduce: Add an event with a long name and/or using relative time, enable icons for calendar events

Expected Results: Consistent vertical alignment between elements, regardless of whether that's top-aligned or centered.

Actual Results: Icon is top-aligned, event name is center-aligned.

Configuration:

var config = {
	address: "0.0.0.0", // Address to listen on, can be:
	// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
	// - another specific IPv4/6 to listen on a specific interface
	// - "", "0.0.0.0", "::" to listen on any interface
	// Default, when address config is left out, is "localhost"
	port: 8080,
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1",
		"192.168.0.0/16"], // Set [] to allow all IP addresses
	// or add a specific IPv4 of 192.168.1.5 :
	// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
	// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
	// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	language: "en",
	timeFormat: 12,
	modules: [
		{
			module: "alert",
		},
		// {
		// 	module: "updatenotification",
		// 	position: "top_bar"
		// },
		{
			module: "clock",
			position: "top_left"
		},
		{
			module: 'calendar_monthly',
			position: 'top_right',
			config: {}
		},
		{
			module: 'uptimerobot',
			position: 'top_center',
			config: {
				api_key: "XXXXXXXXX",
				useIcons: true,
				useColors: true
			}
		},
		{
			module: 'calendar',
			position: 'top_left',
			config: {
				calendars: [
					{
						url: 'webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics',
						symbol: 'flag',
						color: '#e42217'
					},
					{
						url: 'XXXXXXXXX',
						symbol: 'user-friends',
						color: '#fff380'
					},
					{
						url: 'XXXXXXXXX',
						symbol: 'chalkboard-user',
						color: '#047832'
					},
					{
						url: 'XXXXXXXXX',
						symbol: 'globe',
						color: '#f93'
					}
				],
				fadePoint: 0.4,
				hideTime: true,
				showTimeToday: true,
				maximumNumberOfDays: 90,
				maximumEntries: 8,
				displaySymbol: true,
				colored: true,
				coloredSymbolOnly: true,
				wrapEvents: true,
				timeFormat: "relative",
				nextDaysRelative: true,
				hideOngoing: false,
				getRelative: 0
			}
		},
		{
			module: 'MMM-WeatherOrNot',
			position: 'bottom_bar',
			config: {
				location: 'XXXXX',
				locationCode: 'XXXXXXXXX',
				languages: 'en',
				tempUnits: 'F',
				days: '7',
				icons: 'Climacons Animated',
				theme: 'weather_one'
			}
		},
		{
			module: 'MMM-Dad-Jokes',
			position: 'top_bar',
			config: {
				updateInterval: 185001,
				filters: [
					'damn',
					'Hans free',
					'Zimbabwe'
				]
			}
		},
		{
			module: 'MMM-Wallpaper',
			position: 'fullscreen_below',
			config: {
				source: [
					'bing',
					'/r/EarthPorn',
					'/r/spaceporn',
					'/r/WaterPorn',
					'/r/AnimalPorn',
					'/r/NaturePorn',
					'/r/NatureIsFuckingLit',
					'/r/ITookAPicture',
					'/r/ArchitecturalRevival',
					'/r/naturepics',
					'/r/ruralporn',
					'/r/telephotolandscapes',
				],
				maximumEntries: 20,
				filter: 'none',
				nsfw: false
			},
			header: ''
		},
		{
			module: 'MMM-Remote-Control',
			config: {
				customCommand: {
					monitorOnCommand: 'vcgencmd display_power 1',
					monitorOffCommand: 'vcgencmd display_power 0',
					monitorStatusCommand: 'vcgencmd display_power -1 | grep -q ' +
						'"display_power=1" && echo "true" || echo ' +
						'"false"'
				},
				pm2ProcessName: "MagicMirror",
				apiKey: "XXXXXXXXX"
			}
		},
		{
			module: 'MMM-Powerwall',
			position: 'lower_third',
			config: {
				powerwallIP: 'XXXXXXXXX',
				powerwallPassword: 'XXXXXXXXX',
				teslaAPIUsername: 'XXXXXXXXX',
				teslaAPIPassword: 'XXXXXXXXX',
				home: [
					XXXXXXXXX,
					-XXXXXXXXX
				],
				twcManagerIP: 'XXXXXXXXX',
				teslamate: {
					url: "mqtt://XXXXXXXXX"
				},
				debug: true
			}
		},
		{
			module: 'MMM-WatchDog'
		}
	]

};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") { module.exports = config; }

Additional Notes: The second emoji that appears in the screenshot is part of the event name.

[khassel]

cannot reproduce this with this calendar config:

                {
                        module: "calendar",
                        header: "German Holidays",
                        position: "top_left",
                        config: {
                                fadePoint: 0.4,
                                hideTime: true,
                                showTimeToday: true,
                                maximumNumberOfDays: 90,
                                maximumEntries: 8,
                                displaySymbol: true,
                                colored: true,
                                coloredSymbolOnly: true,
                                wrapEvents: true,
                                timeFormat: "relative",
                                nextDaysRelative: true,
                                hideOngoing: false,
                                getRelative: 0,
                                calendars: [
                                        {
                                                symbol: 'user-friends',
                                                color: '#fff380',
                                                url: "https://calendar.google.com/calendar/ical/de.german%23holiday%40group.v.calendar.google.com/public/basic.ics"
                                        }
                                ]
                        }
                },

Did you change css via custom.css?

[MikeBishop]

I'll grab the CSS when I'm at a keyboard, but in your repro attempt the event name wraps and the date string doesn't. In what I'm seeing, the date string is wrapped and the event name isn't. (Note the second line, which matches yours.)

[khassel]

Can now reproduce with this ics:

BEGIN:VCALENDAR
PRODID:-//Google Inc//Google Calendar 70.9054//EN
VERSION:2.0
CALSCALE:GREGORIAN
METHOD:PUBLISH
X-WR-CALNAME:xxx@gmail.com
X-WR-TIMEZONE:Europe/Zurich
BEGIN:VTIMEZONE
TZID:Etc/UTC
X-LIC-LOCATION:Etc/UTC
BEGIN:STANDARD
TZOFFSETFROM:+0000
TZOFFSETTO:+0000
TZNAME:GMT
DTSTART:19700101T000000
END:STANDARD
END:VTIMEZONE
BEGIN:VEVENT
DTSTART;VALUE=DATE:20230227
DTEND;VALUE=DATE:20230313
DTSTAMP:20210421T154106Z
UID:zzz@google.com
REATED:20200831T200244Z
DESCRIPTION:
LAST-MODIFIED:20200831T200244Z
LOCATION:
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Birthday
TRANSP:OPAQUE
BEGIN:VALARM
ACTION:DISPLAY
DESCRIPTION:This is an event reminder
TRIGGER:-P0DT7H0M0S
END:VALARM
END:VEVENT

[MikeBishop]

Here's my custom.css:

.module:not(.MMM-WeatherOrNot),
.MMM-Wallpaper .title {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 8px;
}

.MMM-Wallpaper .title {
  bottom: 10px;
}

.region.top {
  top: -40px;
}

.region.left {
  max-width: 40%
}

.module.calendar_monthly {
  min-width: 300px;
}

iframe.iframe {
  width: 100%;
  max-height: 100px;
}

.region.lower.third {
  top: 62%;
}

.uptimerobot .friendlyName {
  text-align: left;
}

I don't see anything there I would expect to affect this. It looks like it happens when the date wraps, and the default rendering of a single-day event doesn't do that very often.

[sdetweil]

the calendar content is rows and columns in and html table

how does tr/td handle wrap?

[khassel]

Seems to be an edge case when the width is very small, I thinks its caused by the default calendar css but I'm not good in css stuff ...

[sdetweil]

the row (tr)expands to wrap the largest element in the table. default td centering is centered. horizontal & vertical
td does not left/right expand, but wraps text
symbol is forced up

[khassel]

this can be fixed by adding

.calendar .table {
  vertical-align: top;
}

in the custom.css file.

I'm not sure if this should be done in calendar.css because I don't know if this would have side effects on other calendar setups.

[sdetweil]

nice. think it should be custom.css

[MikeBishop]

While I'm certainly happy to fix my edge-case locally, it seems unfortunate to leave a bug in because it's difficult to do CSS targeting. Is that an existing concern with the calendar module, that CSS changes can impact other modules by accident?

[khassel]

didn't mean other modules but may others are happy with the horizontal centering. And may there is another reason that this is the default. If there is a majority to do this change in calender.css I can make a PR.

So @sdetweil @rejas whats your opinion?

[MikeBishop]

didn't mean other modules but may others are happy with the horizontal centering. And may there is another reason that this is the default. If there is a majority to do this change in calender.css I can make a PR.

I'd be perfectly happy with center-alignment, too, so long as they're all the same. The weird part is two columns aligning top and one aligning center; I think either way looks fine if they're consistent.