[Enhancement] Kirby Header wraps a little to early

[ ] I have written a good issue

Describe the enhancement

When viewing the Kirby Header in a viewport < 768px the display property is switched from grid to flex, resulting in the action buttons being moved below. This makes good sence for narrow viewports (mobile) but as shown on the attached screenshot it's in some cases way to early.

Describe the solution you'd like

If you change the .container css to always have display property set to flex and add the following

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

Then the break where action buttons are moved below happens more harmonic. Granted, details might have been overlooked.

Have you considered any alternatives?

Are there any additional context?

Screenshot 2024-05-30 at 14 18 06

https://github.com/kirbydesign/designsystem/assets/263060/d6197d3b-bf12-455b-93f4-fdcdfb6d0026

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
[ ] 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 develop 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".

kirbydesign / designsystem