[Enhancement] Add dynamic toolbar height and refine layout

[mictro]

• I have written a good issue

Describe the solution you'd like

• Set the height of the toolbar should be set depending on the size of the screen set as follows*:
  • >= medium: 'xxxxl'/64px
  • < medium: 'xxxl'/56px (default)
  • 'xxl'/48px (if the phone is an iPhone with a notch*)
    * The presence of a notch on the iPhone is not easily detectable but it has been agreed that a defined ios-safe-area-top above 32px will be interpreted as an iPhone with a notch
• Add a 1px 'semi-light' bottom border to the toolbar when content is scrolled - see [Enhancement] Page toolbar needs dropshadow in scroll state #2040 for details
• Increase the distance between the toolbar and the page content - ask UX.
• Restrict the toolbar button styling to icon-only buttons on kirby-page avoiding kirby-modal.
• Extend toolbar styling to kirby-action to work with templates not using the kirby-page-action element.

Have you considered any alternatives?

Are there any additional context?

---

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Refinement

• Request that the issue is UX refined; do not proceed until this is done.
• Request that the issue is tech refined; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

• Make sure you have read: "Before you get coding".
• Signal to others you are working on the issue by assigning yourself.
• Create a branch from the stable branch following our branch naming convention.
• Publish a WIP implementation to Github as a draft PR and ask for feedback.
• Make sure you have implemented tests following the guidelines in: "The good: Test".
• Update the cookbook with examples and showcases.

Review

Once the issue has been implemented and is ready for review:

• Do a self-review.
• Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".