(fix) Fix placement of background data fetching indicator (#104)

palladiumkenya · Dec 16, 2023 · 9ff1737 · 9ff1737
1 parent a3fba8e
commit 9ff1737
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 24 deletions.
diff --git a/packages/esm-billing-app/src/bills-table/bills-table.component.tsx b/packages/esm-billing-app/src/bills-table/bills-table.component.tsx
@@ -260,28 +260,28 @@ function FilterableTableHeader({
         </div>
         <div className={styles.backgroundDataFetchingIndicator}>
           <span>{isValidating ? <InlineLoading /> : null}</span>
-          <div>
-            <Tag type="red" title={billPaymentStatus}>
-              {billPaymentStatus === '' ? 'ALL' : billPaymentStatus}
-            </Tag>
-            <OverflowMenu flipped renderIcon={Filter}>
-              <OverflowMenuItem
-                className={styles.menuitem}
-                onClick={() => handleSetBillPaymentStatus('')}
-                itemText={t('all', 'ALL')}
-              />
-              <OverflowMenuItem
-                className={styles.menuitem}
-                onClick={() => handleSetBillPaymentStatus('PAID')}
-                itemText={t('paid', 'PAID')}
-              />
-              <OverflowMenuItem
-                className={styles.menuitem}
-                onClick={() => handleSetBillPaymentStatus('PENDING')}
-                itemText={t('pending', 'PENDING')}
-              />
-            </OverflowMenu>
-          </div>
+        </div>
+        <div>
+          <Tag type="red" title={billPaymentStatus}>
+            {billPaymentStatus === '' ? 'ALL' : billPaymentStatus}
+          </Tag>
+          <OverflowMenu className={styles.menu} flipped renderIcon={Filter}>
+            <OverflowMenuItem
+              className={styles.menuitem}
+              onClick={() => handleSetBillPaymentStatus('')}
+              itemText={t('all', 'ALL')}
+            />
+            <OverflowMenuItem
+              className={styles.menuitem}
+              onClick={() => handleSetBillPaymentStatus('PAID')}
+              itemText={t('paid', 'PAID')}
+            />
+            <OverflowMenuItem
+              className={styles.menuitem}
+              onClick={() => handleSetBillPaymentStatus('PENDING')}
+              itemText={t('pending', 'PENDING')}
+            />
+          </OverflowMenu>
         </div>
       </div>
       <Search

diff --git a/packages/esm-billing-app/src/bills-table/bills-table.scss b/packages/esm-billing-app/src/bills-table/bills-table.scss
@@ -24,18 +24,21 @@
   }
 }
 
+.menu {
+  margin-left: layout.$spacing-03;
+}
+
 .headerContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
+  padding: layout.$spacing-04 layout.$spacing-05;
   background-color: $ui-02;
 }
 
 .backgroundDataFetchingIndicator {
   align-items: center;
   display: flex;
-  flex: 1 1 0%;
   justify-content: space-between;
 }