Improve styling of "deadline display" in responsive and mobile mode

[munen]

#891 added a deadline display option on headlines. It works great and is a solid implementation. Only in responsive mode and on mobile devices, there's room for improvement.

This is what it looks like on an iPhone 13 pro in PWA mode:

Here it's in FF on Linux, using responsive mode to simulate a Galaxy 20:

[munen]

@dmorlitz Pinging you here for reference, because I mentioned I'll open a new issue for the responsiveness improvement on the new deadline display. Not that you have to take action on it, anybody can take it up!

[dmorlitz]

I have opened PR#925 (#925) which starts to fix some of these issues. This PR adds a non-breaking attribute to the overlaid date and increases the right margin on the overlay so it does not fall off the screen on the systems I tested it on. I want to see if I can more programmatically find the right margin - or change the span to a div - to avoid text falling off the screen in all cases

[dmorlitz]

I do also want to quickly mention that the date in the "Doctor's appointment" in the Sample file is part of the Description and not an actual Deadline - which is why it renders differently in your screenshot above.

[munen]

Closed by #925