[Enhancement] Toolbar, header and action buttons visual adjustments

[jakobe]

• I have written a good issue

Describe the enhancement

Describe the solution you'd like

• Remove padding-top on content when the new kirby-header component is present

• Kirby header on small screens:

  • only 8px margin-top, when avatar or progress-circle is present:
    

• Remove 2px bottom-margin from h1 when used in key value scenario:
  

• Remove column-gap from div.container when styled as grid on large screens to avoid double spacing (16px padding is already added to div.title-container):
  
  and:
  

• Also consider changing div.title-container horizontal padding to margin

• Toolbar:

  • Remove 4px horizontal padding from ion-toolbar

  • Horizontal padding should be:

    • Small screens: 16px
      
    • Large screens: 24px
      

  • Action buttons:

    • Should have no margin-right
    • Should have 8px gap between them
    • Should have 8px margin-left
      

• Action buttons on canvas:

  • Should have 8px margin-left
  • Should have 8px gap between them
  • Should have 8px margin-right
    

• Toolbar title width should account for action buttons:
  ❌ Current behaviour:
  
  ✅ Expected behaviour:
  

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 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".