From 225b330a3b4e01ba3dc3a698ccaf6a717f385dad Mon Sep 17 00:00:00 2001
From: strzelec <adam.strzelec@pagepro.pl>
Date: Fri, 24 Jan 2025 16:46:01 +0100
Subject: [PATCH 1/4] fix: staged payment table content position

---
 .../partials/StagedPaymentRecipientsField/hooks.tsx |  2 +-
 .../StagedPaymentTable/StagedPaymentTable.tsx       | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/hooks.tsx
index ac4546f41a..f6bc11e0ee 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/hooks.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/hooks.tsx
@@ -86,7 +86,7 @@ export const useStagedPaymentRecipientsTableColumns = (
         }),
         columnHelper.display({
           id: 'amount',
-          staticSize: '216px',
+          staticSize: '210px',
           header: () => formatText({ id: 'table.row.amount' }),
           cell: ({ row }) => (
             <AmountField
diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
index ce5e89d9d5..e269485a85 100644
--- a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
+++ b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
@@ -101,7 +101,7 @@ const useStagedPaymentTableColumns = ({
             : undefined,
         }),
         columnHelper.accessor('amount', {
-          staticSize: '180px',
+          staticSize: '210px',
           enableSorting: false,
           header: () => formatText({ id: 'table.row.amount' }),
           cell: ({ row }) => (
@@ -134,7 +134,7 @@ const useStagedPaymentTableColumns = ({
           ? [
               columnHelper.display({
                 id: 'release',
-                staticSize: '96px',
+                staticSize: '60px',
                 enableSorting: false,
                 cell: ({ row }) => {
                   const { original } = row;
@@ -179,7 +179,14 @@ const useStagedPaymentTableColumns = ({
                     : undefined,
               }),
             ]
-          : []),
+          : [
+              columnHelper.display({
+                id: 'release',
+                staticSize: '60px',
+                enableSorting: false,
+                cell: () => null,
+              }),
+            ]),
       ];
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [

From 0d4551e32727d475fae3f4d9f4fc3564fb29e03b Mon Sep 17 00:00:00 2001
From: strzelec <adam.strzelec@pagepro.pl>
Date: Fri, 31 Jan 2025 13:50:37 +0100
Subject: [PATCH 2/4] fix: improve tables appearance for mobile

---
 .../PaymentBuilderPayoutsTotal.tsx            |   2 +-
 .../StagedPaymentTable/StagedPaymentTable.tsx | 111 ++++++++++++------
 2 files changed, 78 insertions(+), 35 deletions(-)

diff --git a/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderPayoutsTotal/PaymentBuilderPayoutsTotal.tsx b/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderPayoutsTotal/PaymentBuilderPayoutsTotal.tsx
index 1e869a2960..fc86a78ccc 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderPayoutsTotal/PaymentBuilderPayoutsTotal.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderPayoutsTotal/PaymentBuilderPayoutsTotal.tsx
@@ -89,7 +89,7 @@ const PaymentBuilderTokensTotal: FC<PaymentBuilderPayoutsTotalProps> = ({
         )}
       >
         <Numeral value={payout.amount} decimals={tokenData?.decimals} />
-        <div className="flex items-center gap-1">
+        <div className="flex items-center justify-start gap-1">
           <TokenAvatar
             tokenAddress={tokenData.tokenAddress}
             tokenAvatarSrc={tokenData.avatar ?? undefined}
diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
index e269485a85..f68e387b3c 100644
--- a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
+++ b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
@@ -5,7 +5,7 @@ import { defineMessages } from 'react-intl';
 
 import { ADDRESS_ZERO } from '~constants';
 import { useStagedPaymentContext } from '~context/StagedPaymentContext/StagedPaymentContext.ts';
-import { useMobile, useTablet } from '~hooks';
+import { useTablet } from '~hooks';
 import useEnabledExtensions from '~hooks/useEnabledExtensions.ts';
 import useWrapWithRef from '~hooks/useWrapWithRef.ts';
 import { type Expenditure } from '~types/graphql.ts';
@@ -54,7 +54,7 @@ const useStagedPaymentTableColumns = ({
     useStagedPaymentContext();
   const dataRef = useWrapWithRef(data);
   const hasMoreThanOneToken = dataRef.current.length > 1;
-  const isMobile = useMobile();
+  const isTablet = useTablet();
   const { stagedExpenditureAddress } = useEnabledExtensions();
   const hasMoreThanOneMilestone =
     dataRef.current.filter((item) => !item.isClaimed).length > 1;
@@ -68,6 +68,17 @@ const useStagedPaymentTableColumns = ({
       const columnHelper =
         createColumnHelper<StagedPaymentRecipientsFieldModel>();
 
+      const releaseTableSpacer = isTablet
+        ? []
+        : [
+            columnHelper.display({
+              id: 'release',
+              staticSize: '60px',
+              enableSorting: false,
+              cell: () => null,
+            }),
+          ];
+
       return [
         columnHelper.accessor('milestone', {
           header: () => formatText({ id: 'table.row.milestone' }),
@@ -112,23 +123,25 @@ const useStagedPaymentTableColumns = ({
               isLoading={isLoading}
             />
           ),
-          footer: hasMoreThanOneToken
-            ? () => (
-                <>
-                  <PaymentBuilderPayoutsTotal
-                    data={dataRef.current}
-                    itemClassName="justify-end md:justify-start"
-                    buttonClassName="justify-end md:justify-start"
-                  />
-                  {isMobile &&
-                    isPaymentStep &&
-                    hasMoreThanOneMilestone &&
-                    isCorrectExtensionInstalled && (
-                      <ReleaseAllButton items={dataRef.current} />
-                    )}
-                </>
-              )
-            : undefined,
+          ...((!isTablet || !isPaymentStep) && {
+            footer: hasMoreThanOneToken
+              ? () => {
+                  return (
+                    <div
+                      className={clsx({
+                        'w-[calc(200%+35px)] min-w-[120px]': isTablet,
+                      })}
+                    >
+                      <PaymentBuilderPayoutsTotal
+                        data={dataRef.current}
+                        itemClassName={clsx({ 'justify-end': isTablet })}
+                        buttonClassName="justify-end md:justify-start"
+                      />
+                    </div>
+                  );
+                }
+              : undefined,
+          }),
         }),
         ...(isPaymentStep
           ? [
@@ -144,7 +157,11 @@ const useStagedPaymentTableColumns = ({
                   const isClaimed = currentMilestone?.isClaimed;
 
                   return isClaimed ? (
-                    <div className="flex items-center justify-end">
+                    <div
+                      className={clsx('flex items-center', {
+                        'justify-end': !isTablet,
+                      })}
+                    >
                       <PillsBase
                         className={clsx(
                           'bg-teams-blue-50 text-sm font-medium text-teams-blue-400',
@@ -172,27 +189,52 @@ const useStagedPaymentTableColumns = ({
                   );
                 },
                 footer:
-                  !isMobile &&
-                  hasMoreThanOneMilestone &&
-                  isCorrectExtensionInstalled
-                    ? () => <ReleaseAllButton items={dataRef.current} />
-                    : undefined,
+                  hasMoreThanOneMilestone && isCorrectExtensionInstalled
+                    ? () => (
+                        <div
+                          className={clsx({
+                            'w-[calc(200%+35px)] min-w-[120px]': isTablet,
+                          })}
+                        >
+                          {isTablet && (
+                            <div className="">
+                              <PaymentBuilderPayoutsTotal
+                                data={dataRef.current}
+                                itemClassName="justify-end md:justify-start"
+                                buttonClassName="justify-end md:justify-start"
+                              />
+                            </div>
+                          )}
+
+                          <ReleaseAllButton items={dataRef.current} />
+                        </div>
+                      )
+                    : () =>
+                        isTablet ? (
+                          <div
+                            className={clsx({
+                              'w-[calc(200%+35px)] min-w-[120px]': isTablet,
+                            })}
+                          >
+                            {isTablet && (
+                              <div className="">
+                                <PaymentBuilderPayoutsTotal
+                                  data={dataRef.current}
+                                  itemClassName="justify-end md:justify-start"
+                                  buttonClassName="justify-end md:justify-start"
+                                />
+                              </div>
+                            )}
+                          </div>
+                        ) : undefined,
               }),
             ]
-          : [
-              columnHelper.display({
-                id: 'release',
-                staticSize: '60px',
-                enableSorting: false,
-                cell: () => null,
-              }),
-            ]),
+          : releaseTableSpacer),
       ];
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
       hasMoreThanOneToken,
       isPaymentStep,
-      isMobile,
       hasMoreThanOneMilestone,
       isCorrectExtensionInstalled,
       isLoading,
@@ -201,6 +243,7 @@ const useStagedPaymentTableColumns = ({
       // Even though this is not directly used, it is needed to refresh the ReleaseButton
       isPendingStagesRelease,
       allMilestonesSlotIdsAwaitingRelease.length,
+      isTablet,
     ]);
 
   return columns;

From 0f9a2289e666a6ab62db7da7443d46bde90d9e6c Mon Sep 17 00:00:00 2001
From: strzelec <adam.strzelec@pagepro.pl>
Date: Mon, 3 Feb 2025 19:14:35 +0100
Subject: [PATCH 3/4] fix: align payment link and hide footer when only one
 milestone

---
 .../StagedPaymentTable/StagedPaymentTable.tsx | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
index f68e387b3c..dda16fdbd6 100644
--- a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
+++ b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
@@ -173,7 +173,7 @@ const useStagedPaymentTableColumns = ({
                   ) : (
                     <>
                       {isCorrectExtensionInstalled ? (
-                        <div className="flex items-center justify-end gap-3">
+                        <div className="fflex items-center gap-3 md:justify-end">
                           <ReleaseButton
                             description={MSG.payNow}
                             items={currentMilestone ? [currentMilestone] : []}
@@ -188,29 +188,10 @@ const useStagedPaymentTableColumns = ({
                     </>
                   );
                 },
-                footer:
-                  hasMoreThanOneMilestone && isCorrectExtensionInstalled
-                    ? () => (
-                        <div
-                          className={clsx({
-                            'w-[calc(200%+35px)] min-w-[120px]': isTablet,
-                          })}
-                        >
-                          {isTablet && (
-                            <div className="">
-                              <PaymentBuilderPayoutsTotal
-                                data={dataRef.current}
-                                itemClassName="justify-end md:justify-start"
-                                buttonClassName="justify-end md:justify-start"
-                              />
-                            </div>
-                          )}
-
-                          <ReleaseAllButton items={dataRef.current} />
-                        </div>
-                      )
-                    : () =>
-                        isTablet ? (
+                ...(hasMoreThanOneToken && {
+                  footer:
+                    hasMoreThanOneMilestone && isCorrectExtensionInstalled
+                      ? () => (
                           <div
                             className={clsx({
                               'w-[calc(200%+35px)] min-w-[120px]': isTablet,
@@ -225,8 +206,29 @@ const useStagedPaymentTableColumns = ({
                                 />
                               </div>
                             )}
+
+                            <ReleaseAllButton items={dataRef.current} />
                           </div>
-                        ) : undefined,
+                        )
+                      : () =>
+                          isTablet ? (
+                            <div
+                              className={clsx({
+                                'w-[calc(200%+35px)] min-w-[120px]': isTablet,
+                              })}
+                            >
+                              {isTablet && (
+                                <div className="">
+                                  <PaymentBuilderPayoutsTotal
+                                    data={dataRef.current}
+                                    itemClassName="justify-end md:justify-start"
+                                    buttonClassName="justify-end md:justify-start"
+                                  />
+                                </div>
+                              )}
+                            </div>
+                          ) : undefined,
+                }),
               }),
             ]
           : releaseTableSpacer),

From 761336120493e708cd6a7c9c1f200974d2015933 Mon Sep 17 00:00:00 2001
From: strzelec <adam.strzelec@pagepro.pl>
Date: Tue, 11 Feb 2025 13:48:17 +0100
Subject: [PATCH 4/4] fix: rebase fixes

---
 .../partials/StagedPaymentTable/StagedPaymentTable.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
index dda16fdbd6..9d1fdb9047 100644
--- a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
+++ b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
@@ -173,7 +173,7 @@ const useStagedPaymentTableColumns = ({
                   ) : (
                     <>
                       {isCorrectExtensionInstalled ? (
-                        <div className="fflex items-center gap-3 md:justify-end">
+                        <div className="flex items-center gap-3 md:justify-end">
                           <ReleaseButton
                             description={MSG.payNow}
                             items={currentMilestone ? [currentMilestone] : []}