context menu list item text not fully displayed under menu button

[syedali237]

Trying to use the menu button in my application , for the dropdown it internally uses the context menu, but I have an issue with the text being not fully displayed on the dropdown, it shows this same behavior on the docs as displayed below, what i want is the text to fully displayed , how do i fix it?

also help me with the background color of the dropdown too, that should be the same color as in docs

docs:

My implementation :

code snippet :

<div class="host-header-actions">
          <cds-menu-button kind="tertiary"
                           size="lg"
                           menuAlignment="bottom-end"
                           label="Actions">
            @for (action of getVisibleHostActions(); track action.name) {
              <cds-menu-item label={{action.name}}
                             [disabled]="isHostActionDisabled(action)"
                             (click)="runHostAction(action)"
                             title={{action.name}}>
              </cds-menu-item>
            }
          </cds-menu-button>
        </div>

.host-header-actions {
  margin-left: auto;
  // flex-shrink: 0;
}

context menu : https://angular.carbondesignsystem.com/?path=/docs/components-context-menu--docs
menu button : https://angular.carbondesignsystem.com/?path=/docs/components-menu-button--docs