bootstrap 5 dropdown-menu navbar streches strangly when hover on dropdown-ul-items

Question

My bootstrap dropdown Navbar menu acts strangely on small screens. As shown n the images below, hovering above dropdown menus pushes the other UL section below or to the side. I struggle to figure out how to solve it so it can be displayed similarly to the way it on large screens.

My menu is composed  of three sections. Utilities (ul section that regroups Contact, Languages, LogIn, Search components)Brand+logoNavigation.

In my Sass file, I tried with the following code to displays the dropdown-menu on a higher z-index on small screens, the result remained the same.

@media (max-width: 576px) {
    .dropdown-toggle ul {
        z-index: 99;
    }
}

Below you can find Navbar code and my styling. I tried to keep it as short as possible.

Any advise on how I advance would be highly appreciated. .

<!-- Navbar-->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container-fluid justify-content-between">
 <!--Utilities Section-->   
<ul class='navbar-nav flex-row components order-sm-2'>
...
<!--Search section--><li class="nav-item dropdown">
  <a class="nav-link" href="/search/"><i class="fas fa-search" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
  </i></a>
</li><!--End Search section--><!--Language section--><li class="nav-item dropdown">
  <span class="nav-link dropdown-toggle badgeClass" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">
  <i class="fa fa-globe" id="lang1">
 </i>
 <span class="badge rounded-pill bg-danger">{{LANGUAGE_CODE|capfirst}}</span>
  </span>

  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton3">
...       
    <li class=""><a class="dropdown-item active" href="page_url" hreflang="{{ language_code }}">
                {{ language.name_local }} ({{ language.code }})
        </a></li>        ...<li class="">...
  </ul>
</li>
...Idem for 
'User Section''Contact Section'
</ul>
<!--End Utilities section-->
<!--Header section, logo title-->
    <a class="navbar-brand ms-3" href="/">{{ logo.name }} {% image logo. fill-50x50 %}</a>
<--Navigation section-->
 ...<!--End Navigation section -->   
</div>
</nav>

Sass/CSS/* the navigation menu */

a.menuitem {
    font-size: 1.2em;
    font-weight: bold;
}

.nav-link, .fa-search, .nav-language{
    color: $secondary !important;
}

.nav-link:hover, .fa-search:hover, .nav-language:hover {
    color: $primary !important;
}

.nav-item.active {
  border-bottom:2px solid $primary;
  color: red !important;
}

/* slightly enlarge the image on hover */

a.menuitem .image-menu {
    transition: transform 300ms;
}
a.menuitem:hover .image-menu {
    transform: scale(1.1);
}
a.menuicon:hover {
    text-decoration: none;
}

a.dropdown-menu {
    min-width: 40px;
}

/* for the logo */
.navbar .navbar-brand {
    font-family: 'Mochiy Pop P One', sans-serif!important;;
    font-size: 30px !important;
    color: $primary !important;
}

.nav-link .fa {
    font-size:150%;
    font-weight:100;
}

.navbar .fa {
    font-size:2rem;
}

/*dropdown menu*/
.dropdown-submenu {
  position: relative;
}

.submenu .dropdown-menu {
  top:20px;
  left:100%!important;
  margin-top: -1px;
}

.dropdown-menu li a:hover {
  color:$primary!important;
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

.dropdown-menu > li:hover > .submenu{ display: block; }

.dropdown-item {
    width:auto;
}

/* different color for the parent item in the dropdown-menu */
.navbar-nav li a b {
    color:$danger;
}
.navbar-nav li a b:hover {
    color:$warning;
}

/* components class to hide the dropdown-toggle for utilities items*/
.components .dropdown-menu-end {
  right: 0;
  left: auto;
}

.components .dropdown-toggle::after {
    content: none;
}

/*language badge*/
.nav-item .badgeClass{
  position: relative;
}
.nav-item .badgeClass span{
  position: absolute;
  top: 0px;
  right: 0px;
  display: block;
  font-size:.4em;
}