mgr/dashboard: right-align dropdown menu of column filters

When the value of a filter is too long, the text of value will run out
of the viewport. Right-aligning the menu makes the text visible.

NOTE: This change can't be backported from master because in master we had
switched the bootstrap library to ng-bootstrap and the menu is already
right-aligned in the master.

Fixes: https://tracker.ceph.com/issues/44458
Signed-off-by: Kiefer Chang <kiefer.chang@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 131977cceadb49b49d2ea0d05f9a249a38344e8f..e50bffcd302ad96c53556f70de5d4fe48d6f014f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -34,7 +34,7 @@
           {{ selectedFilter.column.name }}
         </a>
         <ul *dropdownMenu
-            class="dropdown-menu px-1"
+            class="dropdown-menu dropdown-menu-right px-1"
             role="menu">
           <li *ngFor="let filter of columnFilters"
               role="menuitem">
@@ -53,7 +53,7 @@
            {{ selectedFilter.value ? selectedFilter.value.formatted: 'Any' }}
         </a>
         <ul *dropdownMenu
-            class="dropdown-menu px-1"
+            class="dropdown-menu dropdown-menu-right px-1"
             role="menu">
           <li *ngFor="let option of selectedFilter.options"
               role="menuitem">