fix: restored buttons to original ui

Author: krisxcrash

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

@@ -15,3 +15,17 @@
     justify-content: flex-end;
   }
 }
+
+.actionsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: toRem(12);
+  align-items: stretch;
+  width: 100%;
+
+  @include container-query(map-get($global-breakpoints, 'small')) {
+    flex-direction: row;
+    align-items: center;
+    width: auto;
+  }
+}

src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.tsx

@@ -559,46 +559,48 @@ export const PayrollOverviewPresentation = ({
 
   const actions = (
     <ActionsLayout justifyContent="end">
-      {isProcessed ? (
-        <>
-          <Button onClick={onPayrollReceipt} variant="secondary" isDisabled={isSubmitting}>
-            {t('payrollReceiptCta')}
-          </Button>
-          <Button
-            onClick={() => {
-              setIsCancelDialogOpen(true)
-            }}
-            variant="error"
-            isDisabled={isSubmitting}
-          >
-            {t('cancelCta')}
-          </Button>
-        </>
-      ) : (
-        <>
-          <Button onClick={onEdit} variant="secondary" isDisabled={isSubmitting}>
-            {t('editCta')}
-          </Button>
-          <Button
-            onClick={onSubmit}
-            isDisabled={
-              isSubmitting ||
-              (submissionBlockers.length > 0 &&
-                (submissionBlockers.some(
-                  blocker =>
-                    !PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(
-                      blocker.blockerType || '',
-                    ),
-                ) ||
-                  submissionBlockers.some(
-                    blocker => !selectedUnblockOptions[blocker.blockerType || ''],
-                  )))
-            }
-          >
-            {t('submitCta')}
-          </Button>
-        </>
-      )}
+      <div className={styles.actionsContainer}>
+        {isProcessed ? (
+          <>
+            <Button onClick={onPayrollReceipt} variant="secondary" isDisabled={isSubmitting}>
+              {t('payrollReceiptCta')}
+            </Button>
+            <Button
+              onClick={() => {
+                setIsCancelDialogOpen(true)
+              }}
+              variant="error"
+              isDisabled={isSubmitting}
+            >
+              {t('cancelCta')}
+            </Button>
+          </>
+        ) : (
+          <>
+            <Button onClick={onEdit} variant="secondary" isDisabled={isSubmitting}>
+              {t('editCta')}
+            </Button>
+            <Button
+              onClick={onSubmit}
+              isDisabled={
+                isSubmitting ||
+                (submissionBlockers.length > 0 &&
+                  (submissionBlockers.some(
+                    blocker =>
+                      !PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(
+                        blocker.blockerType || '',
+                      ),
+                  ) ||
+                    submissionBlockers.some(
+                      blocker => !selectedUnblockOptions[blocker.blockerType || ''],
+                    )))
+              }
+            >
+              {t('submitCta')}
+            </Button>
+          </>
+        )}
+      </div>
     </ActionsLayout>
   )