mgr/dashboard: fix filter icon alignment in table toolbar

Replace Bootstrap inline styles with proper CSS class for filter
icon and select dropdowns alignment. Created filter-wrapper class
to properly align filter icon with select elements using flexbox.

Signed-off-by: Afreen Misbah <afreen@ibm.com>
Assisted-by: Claude
Fixes: https://tracker.ceph.com/issues/76631

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 f30f45fc2ea51eb91d0c2ac2f8c5d559030d5e81..32ea1ac5555f2af0c2c57fa806517687d9a0db18 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
@@ -52,28 +52,29 @@
       <!-- end search -->
       <!-- column filters -->
       <ng-container *ngIf="columnFilters.length !== 0">
-        <div class="d-inline-flex position-relative">
-        <svg [cdsIcon]="icons.filter"
-             [size]="icons.size16"></svg>
+        <div class="filter-wrapper">
+          <svg [cdsIcon]="icons.filter"
+               [size]="icons.size16"
+               class="cds--toolbar-action__icon"></svg>
+          <cds-select (valueChange)="onSelectFilter($event)"
+                      display="inline"
+                      id="filter_name">
+            <ng-container *ngFor="let filter of columnFilters">
+              <option [value]="filter.column.name"
+                      [selected]="filter.column.name === selectedFilter.column.name">{{ filter.column.name }}</option>
+            </ng-container>
+          </cds-select>
+          <cds-select (valueChange)="onChangeFilter($event)"
+                      display="inline"
+                      id="filter_option">
+            <option *ngIf="!selectedFilter.value"
+                    i18n>Any</option>
+            <ng-container *ngFor="let option of selectedFilter.options">
+              <option [value]="option.raw"
+                      [selected]="option.raw === selectedFilter?.value?.raw">{{ option.formatted }}</option>
+            </ng-container>
+          </cds-select>
         </div>
-        <cds-select (valueChange)="onSelectFilter($event)"
-                    display="inline"
-                    id="filter_name">
-          <ng-container *ngFor="let filter of columnFilters">
-            <option [value]="filter.column.name"
-                    [selected]="filter.column.name === selectedFilter.column.name">{{ filter.column.name }}</option>
-          </ng-container>
-        </cds-select>
-        <cds-select (valueChange)="onChangeFilter($event)"
-                    display="inline"
-                    id="filter_option">
-          <option *ngIf="!selectedFilter.value"
-                  i18n>Any</option>
-          <ng-container *ngFor="let option of selectedFilter.options">
-            <option [value]="option.raw"
-                    [selected]="option.raw === selectedFilter?.value?.raw">{{ option.formatted }}</option>
-          </ng-container>
-        </cds-select>
       </ng-container>
       <!-- end column filters -->
       <!-- refresh button -->

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
index 4ba33aa004c50134fda8ce60283544a9f4492ae4..89a816426fcf4ab258b658b1a0b0aa9a8caeb7d9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
@@ -110,3 +110,9 @@ tr:hover .edit-btn {
 .table-tag {
   white-space: nowrap;
 }
+
+.filter-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}