Breadcrumbs: Fixed bad dropdown menu placement at small sizes

For #4824

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index 150f78e12026e08e26d748e60b6854958ddf2ab0..ae899357c98f115ba27331e7ac2788870436d9e8 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -906,11 +906,9 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   }
 }
 
   }
 }
 

-@include smaller-than($m) {
+@include smaller-than($l) {

   .dropdown-search-dropdown {
   .dropdown-search-dropdown {

-    position: fixed;
-    right: auto;
-    left: $-m;
+    inset-inline: $-m auto;

   }
   .dropdown-search-dropdown .dropdown-search-list {
     max-height: 240px;
   }
   .dropdown-search-dropdown .dropdown-search-list {
     max-height: 240px;

diff --git a/resources/views/entities/breadcrumb-listing.blade.php b/resources/views/entities/breadcrumb-listing.blade.php
index 1efe3ba34ca97253220f2502facc222fb513bfc5..4f751a93f21d5a6c3ff1be451ec129ed8e332786 100644 (file)
--- a/resources/views/entities/breadcrumb-listing.blade.php
+++ b/resources/views/entities/breadcrumb-listing.blade.php
@@ -1,7 +1,7 @@
-<div class="dropdown-search" components="dropdown dropdown-search"
+<div components="dropdown dropdown-search"

      option:dropdown-search:url="/search/entity/siblings?entity_type={{$entity->getType()}}&entity_id={{ $entity->id }}"
      option:dropdown-search:local-search-selector=".entity-list-item"
      option:dropdown-search:url="/search/entity/siblings?entity_type={{$entity->getType()}}&entity_id={{ $entity->id }}"
      option:dropdown-search:local-search-selector=".entity-list-item"

->
+     class="dropdown-search">

     <div class="dropdown-search-toggle-breadcrumb" refs="dropdown@toggle"
          aria-haspopup="true" aria-expanded="false" tabindex="0">
         <div class="separator">@icon('chevron-right')</div>
     <div class="dropdown-search-toggle-breadcrumb" refs="dropdown@toggle"
          aria-haspopup="true" aria-expanded="false" tabindex="0">
         <div class="separator">@icon('chevron-right')</div>