[BUG] Title in page not fitting on one line when actions are present

[MortenGregersen]

Describe the bug
When a non-breakable title is used in a page with titleMaxLines set to 1 and actions present, the title isn't fitting/scaled down on small screen sizes like the iPhone 5s/SE (5-inch).

In "Investment" in DRB we have a long non-breakable title and a wide button as action, so it isn't looking great on the small screens.

To Reproduce
Steps to reproduce the behavior:

Create a page like the following. The easiest is to use the PageFitHeadingExampleComponent in the Cookbook and change the title and add the actions.

<kirby-page title="Loremipsumbum" titleMaxLines="1">
  <kirby-page-actions *kirbyPageActions="{ sticky: false }">
    <button kirby-button>Get bacon</button>
  </kirby-page-actions>
  <kirby-page-content>
    <div>Some content</div>
  </kirby-page-content>
</kirby-page>

Kirby version

• 1.2.53

Expected behavior
I would expect the title to scale down

Screenshots

Please complete the following information:

• OS: Doesn't matter
• Browser: Doesn't matter
• Browser version: Doesn't matter

Tasks:

• Move issue from "Ready to do" -> "in progress" on our project board
• Create Fix Branch
• Create test reproducing the error
• Fix
• If relevant Update Examples and Showcase
• Push commits to GitHub
• Open a pull request (remember to add closes #issueno to the description) and ask @kirbydesign/kirby-guild for review
• Merge to master and delete branch

[bommariusser]

is this also happening when u have a button with only an icon @MortenGregersen ? :)

[MortenGregersen]

is this also happening when u have a button with only an icon @MortenGregersen ? :)

Yes

[bommariusser]

Jeah i see that. Long words and the page-title don't go along very well... :( But we are also aware of this and working on other kinds of headers. This doesn't mean that this shouldn't be fixed though :)

[stale]

This issue has been automatically marked as stale because of no recent activity. It will be closed in 10 weeks if no further activity occurs. Thank you for your contributions.

[jkaltoft]

Suggestion for solution

A solution must take into consideration what should happen when things do not fit. Expect the worst: Longer words, larger font sizes (which are controlled by the end-user), small device/viewport sizes etc.

Suggestion

• Always display actions button
• Manage text overflow within remaining space
  • See [BUG] Page-title doesn't support longer words #967 (comment)

[RasmusKjeldgaard]

Consider migrating to new header where this is fixed: https://cookbook.kirby.design/#/home/showcase/header