Bug - <sdds-dropdown> overlays sdds-navbar

[blomqvist]

Describe the bug
<sdds-dropdown> in a <table class="sdds-table sdds-table-compact sdds-table-divider sdds-on-white-bg"> have a higher z-index than <nav class="sdds-navbar">

To Reproduce
Create navbar

<nav class="sdds-navbar">
  <div class="sdds-navbar-overlay"></div>

  <button
    id="menu-mobile"
    class="sdds-navbar-icon-button sdds-navbar-side-menu-drawer"
    (click)="toggle()"
  >
    <span class="sdds-icon-drawer"></span>
  </button>

  <div class="sdds-navbar-application-brand">Application title</div>

  <div id="side-menu" class="sdds-navbar-collapsible {{ isExpanded ? 'expanded' : ''}}">
    <ul class="sdds-navbar-menu-list">
      <li
        class="sdds-navbar-menu-item"
        [routerLinkActive]="['link-active']"
        [routerLinkActiveOptions]="{ exact: true }"
      >
        <a class="sdds-navbar-menu-item-link" [routerLink]="['/']">Home</a>
      </li>
      <li class="sdds-navbar-menu-item" [routerLinkActive]="['link-active']">
        <a class="sdds-navbar-menu-item-link" [routerLink]="['/price-rows']"
          >Price rows</a
        >
      </li>
      <li class="sdds-navbar-menu-item" [routerLinkActive]="['link-active']">
        <a class="sdds-navbar-menu-item-link" [routerLink]="['/products']"
          >Products</a
        >
      </li>
      <li class="sdds-navbar-menu-item">
        <a class="sdds-navbar-menu-item-link" href="/swagger" target="_blank"
          >API (Swagger)</a
        >
      </li>
      <li class="sdds-navbar-menu-item" app-country></li>
    </ul>
  </div>
  <div class="sdds-navbar-scania-brand"></div>
</nav>

Create table

<table class="sdds-table">
  <thead>
    <tr>
      <th>Test</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <sdds-dropdown
          size="small"
          title="Vehicle state, new or used"
          name="vehicle-state"
          *ngIf="isNew"
          [defaultOption]="priceRow.vehicleState"
          (selectOption)="setVehicleState($event['detail'])"
        >
          <sdds-dropdown-option
            *ngFor="let opt of vehicleStateKeys"
            [value]="opt"
          >
            {{ opt }}
          </sdds-dropdown-option>
        </sdds-dropdown>
      </td>
    </tr>
  </tbody>
</table>

Expected behavior

Screenshots

Version of SDDS or which package

{
  "@scania/components": "^1.15.2",
  "@scania/icons": "^1.1.1",
  "@scania/theme-light": "^3.6.4"
}

Application link
N/A

System information:
Tested on macOS (latest) and firefox.

Additional context
Setting sdds-dropdown:host { z-index: 100; } fixes the problem in this scenario. Might have other implications.

AB#1358

[mmexvr]

Thanks for the report!

[theJohnnyMe]

This should be fixed in component: 3.0.0.