From 62ba2ed2822bd240d23e215f8eaa099c6a2b2f81 Mon Sep 17 00:00:00 2001
From: Kevin Burnett <18027+burnettk@users.noreply.github.com>
Date: Tue, 26 Mar 2024 11:55:23 +0000
Subject: [PATCH] put arrow to the right of the button in process instance
 table (#1274)

Co-authored-by: burnettk <burnettk@users.noreply.github.com>
---
 .../src/components/ProcessInstanceListTable.tsx     | 13 ++++++++-----
 spiffworkflow-frontend/src/index.css                |  5 +++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
index 34d6e9dd8..00e6dce97 100644
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
@@ -9,6 +9,7 @@ import {
   TableHeader,
   Stack,
   ButtonSet,
+  TableCell,
 } from '@carbon/react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -519,12 +520,14 @@ export default function ProcessInstanceListTable({
         const piShowButtonElement = (
           <Button
             kind="ghost"
+            className="pi-show-new-tab-button"
             target="_blank"
             href={piLink}
-            style={{ width: '60px' }}
+            style={{ width: '50px' }}
             size="sm"
             renderIcon={ArrowUpRight}
-            iconDescription="Open instance in a new tab"
+            iconDescription="Open instance in new tab"
+            tooltipPosition="left"
             hasIconOnly
           />
         );
@@ -536,12 +539,12 @@ export default function ProcessInstanceListTable({
         ];
         if (!(processInstance.status in statusesToExcludeTaskButton)) {
           currentRow.push(
-            <td>
+            <TableCell align="right">
               <ButtonSet>
-                {piShowButtonElement}
                 {goButtonElement}
+                {piShowButtonElement}
               </ButtonSet>
-            </td>
+            </TableCell>
           );
         } else {
           currentRow.push(<td>{piShowButtonElement}</td>);
diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css
index 257f42779..cb9e3a913 100644
--- a/spiffworkflow-frontend/src/index.css
+++ b/spiffworkflow-frontend/src/index.css
@@ -1023,3 +1023,8 @@ div.onboarding {
 .not-editable {
   pointer-events: none;
 }
+
+.pi-show-new-tab-button {
+  position: relative;
+  left: 6px;
+}