[BUG] Kirby list items gets extensive padding in webkit

[troelslenda]

• I have written a good issue

Describe the bug

When using kirby-items within modals they get extensive padding in webkit and IOS.

Describe how to reproduce the bug

1. Install 5.1.1 or higher of designsystem.
2. Navigate to a security-details page
3. kirby-item that resides within a modal/is not part of a kirby-page (not entirely sure what's the cause)
4. Compare the page in Chrome and safari

Which Kirby version was used?

5.1.1 and higher

What was the expected behavior?

That the kirby-item renders alike across platforms.

Add any screenshots

Please complete the following information:

• OS: MacOS and iOS
• Browser: Safari
• Browser version: Version 15.1 (17612.2.9.1.20)

Are there any additional context?

---

Checklist:

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

Verification

To make sure the bug is not intended behaviour; it should be verified by a member of team Kirby before moving on to implementation.

• Make sure the NOT verified label has been removed by a member of team Kirby; 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.
• Create a test that reproduces the bug following guidelines in: "The good: Test".
• Write code to fix the bug

Review

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

• Do a self-review.
• Create a pull-request.

[RasmusKjeldgaard]

Can confirm this bug is introduced in 5.1.1, right here.

I think it is because Safari handles these differently from other browsers, when --item-padding-top/bottom is not set.

The problem occurs in the modal, because the item inherits --padding-top and --padding-bottom from the surrounding ion-content element, which is set to 24px.

This can be fixed by providing a default value to the custom padding property on the item so it overwrites what is otherwise defined by ion-content, like --padding-top: var(--item-padding-top, 8px);

[troelslenda]

🔥