fix: match transaction aside layout

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss

@@ -1,7 +1,7 @@
 
 .root {
-  position: relative;
-  padding-bottom: 110px;
+  flex: 1 1 auto;
+  overflow: auto;
 }
 
 .transaction {
@@ -25,9 +25,6 @@
 
 .footer {
   background-color: #fff;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
 }
 
 .footerActions {

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss

@@ -1,6 +1,10 @@
 
 .tabs :global .bp4-tab-panel{
   margin-top: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  height: calc(100dvh - 144px);
 }
 .tabs :global .bp4-tab-list{
   background: #fff;
@@ -11,3 +15,9 @@
 .tabs :global .bp4-large > .bp4-tab{
   font-size: 14px;
 }
+
+.tabs {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.module.scss

@@ -9,6 +9,11 @@
   &.active{
     border-color: #88ABDB;
     box-shadow: 0 0 0 2px rgba(136, 171, 219, 0.2);
+
+    .label,
+    .date {
+      color: rgb(21, 82, 200),
+    }
   }
 
   &:hover:not(.active){
@@ -32,4 +37,9 @@
 .label {
   color: #10161A;
   font-size: 15px;
+}
+
+.date {
+  font-size: 12px;
+  color: #5C7080;
 }

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.tsx

@@ -45,7 +45,7 @@ export function MatchTransaction({
     >
       <Stack spacing={3}>
         <span className={styles.label}>{label}</span>
-        <Text style={{ fontSize: 12, color: '#5C7080' }}>Date: {date}</Text>
+        <Text className={styles.date}>Date: {date}</Text>
       </Stack>
 
       <Checkbox

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransaction.tsx

@@ -58,9 +58,10 @@ export function MatchingBankTransaction() {
       uncategorizedTransactionId={uncategorizedTransactionId}
     >
       <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-        <Form>
+        <>
           <MatchingBankTransactionContent />
-        </Form>
+          <MatchTransactionFooter />
+        </>
       </Formik>
     </MatchingTransactionBoot>
   );
@@ -71,7 +72,6 @@ function MatchingBankTransactionContent() {
     <Box className={styles.root}>
       <PerfectMatchingTransactions />
       <GoodMatchingTransactions />
-      <MatchTransactionFooter />
     </Box>
   );
 }