fix(Toolbar - compat): support React version >= 19.2 & StrictMode (#8073)

Fixes #8063

Author: Lukas742

packages/compat/src/components/Toolbar/index.tsx

@@ -211,7 +211,11 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
       }
       return (
         <div
-          ref={itemRef}
+          ref={(node) => {
+            if (controlMetaData.current[index]) {
+              controlMetaData.current[index].ref.current = node;
+            }
+          }}
           key={index}
           className={classNames.childContainer}
           data-component-name="ToolbarChildContainer"

packages/main/src/components/ObjectPageTitle/ObjectPageTitle.module.css

@@ -48,7 +48,6 @@
 
 .title {
   flex-shrink: 1;
-  min-width: 3rem;
   overflow-x: hidden;
   font-family: var(--sapObjectHeader_Title_FontFamily);
   color: var(--sapObjectHeader_Title_TextColor);
@@ -123,20 +122,22 @@
   justify-content: flex-end;
   align-self: flex-start;
 
+  /*ToDo: remove after legacy toolbar support isn't required anymore*/
+  &:has([data-in-object-page-title]) {
+    min-width: 2.125rem;
+  }
+  > [data-component-name='Toolbar']:not(:first-child):last-child {
+    width: unset;
+    flex-shrink: 0;
+  }
+
   > [ui5-toolbar] {
     padding: 0;
     border: none;
   }
-
   > [ui5-toolbar]:not(:first-child):last-child {
     flex: 0 1;
   }
-
-  > [data-component-name='Toolbar']:not(:first-child):last-child {
-    width: unset;
-    flex-shrink: 0;
-  }
-
   > [ui5-toolbar]:only-child {
     flex-grow: 1;
     flex-shrink: 0;