Collapse all-day events into a single line

[tboby]

In Event mode, all-day events with relative time or time remaining take up two lines.
As far as I can tell there is no way to solve this with css as event-right-top and event-right-bottom are in a flex together so really don't want to be on the same line.

It's a bit hard to describe the exact logic that might be appropriate, as there's already a config setting for moving hoursHTML.

Assumptions:

1. It isn't feasible to determine if it will all fit on one line
2. Relative time/remaining time should remain bottom right if there is a second line

Things that can be top right are:

• Location
• Calendar name
• Hours, if configured

My suggestion would be that if any of those are present top right, timeUntilRemaining is displayed on the bottom right. If they are all empty, it's displayed in top right. Done this way I think the only risk is a huge title running into the timeUntilRemaining text. However, I'm more confident that can be fixed with css by forcing event-location to line break in some way.

You might be able to get away without a new config setting with this (fairly conservative) approach!

For reference, the html template:

return html`<div class="single-event-container ${compactMode} ${dayWrap} ${hideDate}" style="${lastEventStyle}">
	${eventLeft}
	<div class="event-right" style="${finishedEventsStyle}">
		${currentEventLine}
		<div class="event-right-top">
			${getTitleHTML(this._config, event, this.hass, this.modeToggle)}
			<div class="event-location">
				${getLocationHTML(this._config, event)} ${eventCalName} ${this._config.hoursOnSameLine ? hoursHTML : ''}
			</div>
		</div>
		<div class="event-right-bottom">${this._config.hoursOnSameLine ? '' : hoursHTML} ${timeUntilRemaining}</div>
		${getDescription(this._config, event)} ${progressBar}
	</div>
</div>`;