styling for the absence page

[HenrikeW]

Related issue(s) and PR(s)

This PR closes #601

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Other

List of changes made

• the styling on the Absence page was updated according to the sketch provided in styling for the vacation page #601
• some basic styling for a mobile view / large zoom was added

Screenshot of the fix

Testing

• go to the Absence page and try to add a planned absence. All functionality that was there before should still be in place.
• You should be able to manually type a date or use the date picker to choose one.

Further comments

Definition of Done checklist

• I have made an effort making the commit history understandable
• I have performed a self-review of my own code and commented any hard-to-understand areas
• Tests and lint/format validations are passing
• My changes generate no new warnings

[ghost]

The styling looks good, but I cannot add absence using keyboard navigation (the start date disappears when the end date is entered), nor use the pen button to edit reported absence. Clicking the edit button changes the reported dates to one date next year (no span).
Also, there is a new dependency to something from gstatic.com which is not good. It appears when there is a planned absence: https://www.gstatic.com/charts/loader.js (initiated from patchWindow.js)
One strange thing is a hard-coded "max-date" for the date pickers (not new to this branch though).
The date picker should not appear when you navigate to a date field unless you tab and click on the calendar icon, or it should close when a date is entered and the user tabs to get to the next field.

Also found some accessibility errors regarding the table + warnings:

Warning: validateDOMNesting(...): tr cannot appear as a child of table. Add a tbody, thead or tfoot to your code to match the DOM tree generated by the browser.
"Empty heading" for empty th elements. Warning about empty button - "A button is empty or has no value text."

[jonandernovella]

[jonandernovella]

It'd be nice if we merge #656 first and then also style the date pickers in this pr.

[HenrikeW]

A lot to look into, I think most things can be addressed quickly. This part though...
The date picker should not appear when you navigate to a date field unless you tab and click on the calendar icon, or it should close when a date is entered and the user tabs to get to the next field.
... requires quite some refactoring as far as I can see. Right now, the behavior is that the date picker opens whenever you click into the input field, no matter if you click on the calendar icon or in the white text box. Tabbing works accordingly. You can then either type manually or use the date picker that appeared. We should discuss if this behavior is acceptable or if it should be the way konere describes it (date picker only opening when clicking / tabbing to the calendar icon). If yes, it will take some more time.
Right now, the calendar icon can be seen as purely decorative.

[ghost]

The problem with the date picker now is that when you enter the field using kbd it appears and the only way it seems to get rid of it is clicking Esc, which clears the field. It should work so that when you have entered a date and press tab you get to the next field (or the date picker icon/button). That is, keyboard navigation should work.

[HenrikeW]

Ah okay, I knew you had to click esc but didn't realize the field was cleared then. That broke somewhere during development. I'll fix that then.

[ghost]

Possible to release, but needs further work, soon.

[jonandernovella]

Great work. We still need to style the edit date pickers, but that will be done later.