fix: align payment link and hide footer when only one milestone

JoinColony · Feb 3, 2025 · 2eb27e7 · 2eb27e7
1 parent 215c70a
commit 2eb27e7
Showing 1 changed file with 27 additions and 25 deletions.
diff --git a/...ompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx b/...ompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
@@ -172,7 +172,7 @@ const useStagedPaymentTableColumns = ({
                   ) : (
                     <>
                       {isCorrectExtensionInstalled ? (
-                        <div className="flex items-center justify-end gap-3">
+                        <div className="flex items-center gap-3 md:justify-end">
                           <button
                             key={row.id}
                             type="button"
@@ -195,29 +195,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,
@@ -232,8 +213,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),