I have a dynamic page, with a header aggregation, where I put a title and some toolbar action buttons, however… they do not look aligned:

Either the title is too high, or the action toolbar buttons are too low… If I add align-items: "Start" to the action toolbar in chrome dev tools, it looks aligned again…

it should look like in the samples from sapui5 (https://sapui5.hana.ondemand.com/#/entity/sap.f.DynamicPage/sample/sap.f.sample.DynamicPageFreeStyle/code):

I just have no idea what I am doing wrong / different… here is my code:

<mvc:View
    controllerName="salesdocumentcreation.controller.SideContent"
    xmlns="sap.m"
    xmlns:f="sap.f"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:c="sap.ui.core"
    xmlns:layout="sap.ui.layout"
    height="100%"
    visible="true"
>
    <f:DynamicPage
        id="SC_DynamicPage1"
        headerPinned="false"
        headerExpanded="true"
        
    >
        <f:title >
     
            <f:DynamicPageTitle id="SC_DynamicPageTitle1">
                <f:heading>
                    <Title
                        id="SC_PageTitle"
                        text="{i18n>SC_PageTitle}"
                        
                    />
                </f:heading>
                <f:expandedContent>
                
                    <Title
                            id="sc_ovTBTitleExpanded"
                            text="{i18n>SC_Docs_OV_Count} ({= ${appSettings>/allTreeItemsCount}})"
                            level="H2"
                        />
                </f:expandedContent>
                <f:snappedContent>
                    <Title
                            id="sc_ovTBTitleSnapped"
                            text="{i18n>SC_Docs_OV_Count} ({= ${appSettings>/allTreeItemsCount}})"
                            level="H2"
                        />
                </f:snappedContent>
                
                <f:actions >
                <Button 
                        id="applyTreeSelectionButton"
                        icon="sap-icon://multi-select"
                        type="Default"
                        enabled="{= ${appSettings>/selectedTreeItemsCount} > 0 ? true : false }"
                        text=""
                        press=".applyTreeSelection"
                    >
                        <customData>
                            <BadgeCustomData
                                id="selectedItemsBadge"
                                key="badge"
                                value="{appSettings>/selectedTreeItemsCount} "
                            />
                        </customData>
                    </Button>
                    <Button
                        id="viewSettingsButton"
                        icon="sap-icon://filter"
                        type="Default"
                        enabled="true"
                        press=".onOpenTreeViewSettingsDialog"
                        text=""
                    />
                    <Switch change=".onSwitchChange" id="headerSwitchBtn" state="false" customTextOn="On" customTextOff="Off" />
                </f:actions>
               
             
                <!-- <f:navigationActions>
                    <Button
                            icon="sap-icon://full-screen"
                            type="Transparent" />
                    <Button
                            icon="sap-icon://decline"
                            type="Transparent" />
                </f:navigationActions> -->
            </f:DynamicPageTitle>
          
        </f:title>
....
</mvc:View>

and if I wanted to align the <f:actions> aggregation manually or I dont know, via layout options or Flexbox… how would I have to do it? wrapping a Flexbox / HBox item around does not work…