[BUG] kirby-x-banner-image content not properly shown on desktop

RasmusKjeldgaard commented 2 weeks ago

[x] I have written a good issue

Describe the bug

If I package the @kirbydesign/extensions-angular and install it in a fresh Angular 17 project,

Describe how to reproduce the bug

From the root of our repo, run npx nx build extensions-angular && npm pack libs/extensions/angular/dist
In a fresh Angular 17 project, install the produced tgz file, e.g. add the tgz file to the root of the fresh application and add "@kirbydesign/extensions-angular": "file:kirbydesign-extensions-angular-0.0.1.tgz", to dependencies in package.json

Import ImageBannerComponent and add it to your template

<kirby-x-image-banner
[title]="'An Image Banner'"
[imagePath]="'https://images.unsplash.com/photo-1514415008039-efa173293080'"
[bodyText]="'This is the body text.'"
[actionButtonText]="'Read more'"
[backgroundBlur]="'dark'"
></kirby-x-image-banner>

Content inside the banner is clipped when viewport width is above the small breakpoint (632px):

Which Kirby version was used?

Unreleased extensions-angular library.

What was the expected behavior?

I would expect all content to show like this:

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 develop 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 commented 2 weeks ago

The issue can be "fixed" by applying something like height: 100% to .content-layer inside kirby-card, as its height is currently 0:

So the content layer is collapsing as the height of the content inside is 0, and we should probably fix this by letting the height of the banner be defined by the elements inside the nested kirby-card, not by setting a fixed height directly on the kirby-card element.

RasmusKjeldgaard commented 2 weeks ago

Turns out the 100% height fix was applied in #3492, that was released in v9.6.0. This bug was identified with Kirby v9.5.0, and v9.6.0 fixes the issue.

kirbydesign / designsystem