diff --git a/packages/main/src/components/ObjectPageTitle/ObjectPageTitle.module.css b/packages/main/src/components/ObjectPageTitle/ObjectPageTitle.module.css index 3fcdc4f1fca..4bfe21abf29 100644 --- a/packages/main/src/components/ObjectPageTitle/ObjectPageTitle.module.css +++ b/packages/main/src/components/ObjectPageTitle/ObjectPageTitle.module.css @@ -127,7 +127,7 @@ } } -.actionsSpacer { +.actionsSeparator { flex-shrink: 0; height: var(--_ui5_dynamic_page_title_actions_separator_height); width: 0.0625rem; diff --git a/packages/main/src/components/ObjectPageTitle/index.tsx b/packages/main/src/components/ObjectPageTitle/index.tsx index 30adcd0de74..dcc31a30285 100644 --- a/packages/main/src/components/ObjectPageTitle/index.tsx +++ b/packages/main/src/components/ObjectPageTitle/index.tsx @@ -165,30 +165,27 @@ const ObjectPageTitle = forwardRef((pr useEffect(() => { const toolbarContainer = toolbarContainerRef.current; - const observer = new MutationObserver(([toolbarContainerMutation]) => { - if (toolbarContainerMutation.type === 'childList') { - const navigationToolbar: ToolbarDomRef | undefined = ( - toolbarContainerMutation.target as HTMLDivElement - ).querySelector(':has(> :nth-last-child(n + 2)) > [ui5-toolbar]:last-child'); - if (navigationToolbar?.children) { - Array.from(navigationToolbar.children).forEach((item) => { + const updateNavigationToolbar = (container: HTMLDivElement) => { + if (container.children.length >= 2) { + const lastChild = container.lastElementChild as ToolbarDomRef; + if (lastChild && lastChild.matches('[ui5-toolbar]')) { + Array.from(lastChild.children).forEach((item) => { item.setAttribute('overflow-priority', 'NeverOverflow'); }); } } + }; + + const observer = new MutationObserver(([toolbarContainerMutation]) => { + if (toolbarContainerMutation.type === 'childList') { + updateNavigationToolbar(toolbarContainerMutation.target as HTMLDivElement); + } }); const config = { childList: true, subtree: true }; if (toolbarContainer) { - const navigationToolbar: ToolbarDomRef | undefined = toolbarContainer.querySelector( - ':has(> :nth-last-child(n + 2)) > [ui5-toolbar]:last-child' - ); - if (navigationToolbar?.children) { - Array.from(navigationToolbar.children).forEach((item) => { - item.setAttribute('overflow-priority', 'NeverOverflow'); - }); - } + updateNavigationToolbar(toolbarContainer); observer.observe(toolbarContainer, config); } @@ -243,7 +240,7 @@ const ObjectPageTitle = forwardRef((pr {actionsBar} {!showNavigationInTopArea && actionsBar && navigationBar && (