From 6d11fb915ed3ad3f5dead05fadcb40317b5832e6 Mon Sep 17 00:00:00 2001
From: Kevin Burnett <18027+burnettk@users.noreply.github.com>
Date: Tue, 25 Jul 2023 10:25:11 -0700
Subject: [PATCH] make perspective dropdown bigger (#403)

Co-authored-by: burnettk <burnettk@users.noreply.github.com>
---
 .../src/components/Filters.tsx                |  2 +-
 .../components/ProcessInstanceListTable.tsx   |  2 +-
 .../ProcessInstanceReportSearch.tsx           | 48 ++++++++++---------
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/Filters.tsx b/spiffworkflow-frontend/src/components/Filters.tsx
index e6280a0f..abb45be1 100644
--- a/spiffworkflow-frontend/src/components/Filters.tsx
+++ b/spiffworkflow-frontend/src/components/Filters.tsx
@@ -30,7 +30,7 @@ export default function Filters({
     let reportSearchSection = null;
     if (reportSearchComponent) {
       reportSearchSection = (
-        <Column sm={2} md={4} lg={7}>
+        <Column sm={3} md={7} lg={15}>
           {reportSearchComponent()}
         </Column>
       );
diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
index fb92540f..2581e7a4 100644
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
@@ -1702,7 +1702,7 @@ export default function ProcessInstanceListTable({
   const reportSearchComponent = () => {
     if (showReports) {
       const columns = [
-        <Column sm={2} md={4} lg={7}>
+        <Column sm={4} md={8} lg={16}>
           <ProcessInstanceReportSearch
             onChange={processInstanceReportDidChange}
             selectedItem={processInstanceReportSelection}
diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceReportSearch.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceReportSearch.tsx
index 1c5ba33d..c93d41b8 100644
--- a/spiffworkflow-frontend/src/components/ProcessInstanceReportSearch.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceReportSearch.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 import {
   ComboBox,
-  Stack,
+  Grid,
+  Column,
   FormLabel,
   // @ts-ignore
 } from '@carbon/react';
-import { truncateString } from '../helpers';
 import { ProcessInstanceReport } from '../interfaces';
 import HttpService from '../services/HttpService';
 
@@ -53,9 +53,7 @@ export default function ProcessInstanceReportSearch({
   const reportSelectionString = (
     processInstanceReport: ProcessInstanceReport
   ) => {
-    return `${truncateString(processInstanceReport.identifier, 20)} (Id: ${
-      processInstanceReport.id
-    })`;
+    return `${processInstanceReport.identifier} (Id: ${processInstanceReport.id})`;
   };
 
   const shouldFilterProcessInstanceReport = (options: any) => {
@@ -70,24 +68,28 @@ export default function ProcessInstanceReportSearch({
 
   if (reportsAvailable()) {
     return (
-      <Stack orientation="horizontal" gap={2}>
-        <FormLabel className="with-top-margin">{titleText}</FormLabel>
-        <ComboBox
-          onChange={onChange}
-          id="process-instance-report-select"
-          data-qa="process-instance-report-selection"
-          items={processInstanceReports}
-          itemToString={(processInstanceReport: ProcessInstanceReport) => {
-            if (processInstanceReport) {
-              return reportSelectionString(processInstanceReport);
-            }
-            return null;
-          }}
-          shouldFilterItem={shouldFilterProcessInstanceReport}
-          placeholder="Choose a process instance perspective"
-          selectedItem={selectedItem}
-        />
-      </Stack>
+      <Grid fullWidth condensed>
+        <Column sm={2} md={3} lg={3}>
+          <FormLabel className="with-top-margin">{titleText}</FormLabel>
+        </Column>
+        <Column sm={2} md={5} lg={13}>
+          <ComboBox
+            onChange={onChange}
+            id="process-instance-report-select"
+            data-qa="process-instance-report-selection"
+            items={processInstanceReports}
+            itemToString={(processInstanceReport: ProcessInstanceReport) => {
+              if (processInstanceReport) {
+                return reportSelectionString(processInstanceReport);
+              }
+              return null;
+            }}
+            shouldFilterItem={shouldFilterProcessInstanceReport}
+            placeholder="Choose a process instance perspective"
+            selectedItem={selectedItem}
+          />
+        </Column>
+      </Grid>
     );
   }
   return null;