fix: align download icon

Author: krisxcrash

src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.module.scss

@@ -6,3 +6,12 @@
   container-type: inline-size;
   width: 100%;
 }
+
+.paystubIconWrapper {
+  display: flex;
+  justify-content: flex-start;
+
+  @include container-query(map-get($global-breakpoints, 'small')) {
+    justify-content: flex-end;
+  }
+}

src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.tsx

@@ -234,17 +234,19 @@ export const PayrollOverviewPresentation = ({
       key: 'paystubs',
       title: t('tableHeaders.paystub'),
       render: (employeeCompensations: EmployeeCompensations) => (
-        <ButtonIcon
-          aria-label={t('downloadPaystubLabel')}
-          variant="tertiary"
-          onClick={() => {
-            if (employeeCompensations.employeeUuid) {
-              onPaystubDownload(employeeCompensations.employeeUuid)
-            }
-          }}
-        >
-          <DownloadIcon />
-        </ButtonIcon>
+        <div className={styles.paystubIconWrapper}>
+          <ButtonIcon
+            aria-label={t('downloadPaystubLabel')}
+            variant="tertiary"
+            onClick={() => {
+              if (employeeCompensations.employeeUuid) {
+                onPaystubDownload(employeeCompensations.employeeUuid)
+              }
+            }}
+          >
+            <DownloadIcon />
+          </ButtonIcon>
+        </div>
       ),
     })
   }