Hi,

I've been tasked with creating a custom version of the Opportunity Team component that users currently see in the side panel.  Most of my development is fine but I am struggling to correctly position the button menu that appears when the dropdown arrow is clicked.

Salesforce working version :-
My version :-

As you can see on my version the menu items appear beneath & to the right of the dropdown (which means half the text is missing as the dropdown appears on the righthand side of the page) whereas the Salesforce version appears to the left & can also appear above the dropdown if there is not enough room on the browser beneath the dropdown.

Cutdown version of the aura component which demonstrates the problem when added to the righthand sidepanel of an opportunity page:-

<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes" access="global">
	<div class="container forceRelatedListSingleContainer" data-aura-class="forceRelatedListSingleContainer">
        <article class="slds-card slds-card_boundary headerBottomBorder forceRelatedListCardDesktop" data-aura-class="forceRelatedListCardDesktop">
            <div class="slds-grid slds-page-header forceRelatedListCardHeader" data-aura-class="forceRelatedListCardHeader">
                <header class="slds-media slds-media--center slds-has-flexi-truncate" >
                    <div class="slds-media__figure stencil slds-avatar slds-avatar_small" aria-hidden="true">
                        <div class="extraSmall forceEntityIcon" style="background-color: #FCB95B" data-aura-class="forceEntityIcon">
                            <span class="uiImage" data-aura-class="uiImage">
                                <img src="/img/icon/t4v35/standard/team_member_120.png" class="icon " alt="Opportunity Team" title="Opportunity Team"/>
                            </span>
                        </div>
                    </div>
                    <div class="slds-media__body">
                        <h2 class="slds-card__header-title">
                            <a class="slds-card__header-link baseCard__header-title-container">
                                <span class="slds-truncate slds-m-right--xx-small" title="Opportunity Team">
                                    Opportunity Team
                                </span>
                            </a>
                        </h2>
                    </div>
                    
                    <div class="slds-p-around_medium container lgc-bg">
                        <lightning:buttonMenu alternativeText="Show menu" variant="border-filled">
                            <lightning:menuItem value="MenuItemOne" label="Menu Item One" />
                            <lightning:menuItem value="MenuItemTwo" label="Menu Item Two" />
                            <lightning:menuItem value="MenuItemThree" label="Menu Item Three" />
                            <lightning:menuItem value="MenuItemFour" label="Menu Item Four" />
                        </lightning:buttonMenu>
                    </div>
                    
                </header>
            </div>
        </article>
    </div>
</aura:component>

Any thoughts gratefully received.