Skip to content

ObjectPageTitle: actionsBar and title in header overlap if title is long and no toolbar is used within the actionsBar #7701

@schempil

Description

@schempil

Describe the bug

Hey folks,

in our application we are using a ObjectPage and we got on the right side of the header some buttons and an Icon. The icon for example is indicating to the user that the page is auto-saved with all changes that can be made inline.

However we are facing an issue with long titles, that overlap with the actionsBar. See this screenshot from stackblitz where I reproduced the issue:

Image

Using a toolbar is not fulfilling the target ux for us, since then the auto save icon would be hidden behind the triple dot menu when the toolbar collapses.

Isolated Example

https://stackblitz.com/edit/github-vzmt3yd3?file=src%2FApp.tsx

Reproduction steps

  1. open provided stackblitz
  2. decrease screen width until overlapping of title and actionsBar happens

Expected Behaviour

I expect the ObjectPageTitle to not have the children overlap each other, so the title itself does not grow into the actionsBar

Screenshots or Videos

No response

UI5 Web Components for React Version

2.13.1

UI5 Web Components Version

2.13.3

Browser

Chrome

Operating System

macOS 15.7 (24G214)

Additional Context

No response

Relevant log output

Organization

SAP SE

Declaration

  • I’m not disclosing any internal or sensitive information.

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    Status

    🆕 New

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions