make perspective dropdown bigger (#403)

Co-authored-by: burnettk <burnettk@users.noreply.github.com>

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>
       );

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}

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: ${
+    return `${processInstanceReport.identifier} (Id: ${processInstanceReport.id})`;
-      processInstanceReport.id
-    })`;
   };
 
   const shouldFilterProcessInstanceReport = (options: any) => {
@@ -70,24 +68,28 @@ export default function ProcessInstanceReportSearch({
 
   if (reportsAvailable()) {
     return (
-      <Stack orientation="horizontal" gap={2}>
+      <Grid fullWidth condensed>
-        <FormLabel className="with-top-margin">{titleText}</FormLabel>
+        <Column sm={2} md={3} lg={3}>
-        <ComboBox
+          <FormLabel className="with-top-margin">{titleText}</FormLabel>
-          onChange={onChange}
+        </Column>
-          id="process-instance-report-select"
+        <Column sm={2} md={5} lg={13}>
-          data-qa="process-instance-report-selection"
+          <ComboBox
-          items={processInstanceReports}
+            onChange={onChange}
-          itemToString={(processInstanceReport: ProcessInstanceReport) => {
+            id="process-instance-report-select"
-            if (processInstanceReport) {
+            data-qa="process-instance-report-selection"
-              return reportSelectionString(processInstanceReport);
+            items={processInstanceReports}
-            }
+            itemToString={(processInstanceReport: ProcessInstanceReport) => {
-            return null;
+              if (processInstanceReport) {
-          }}
+                return reportSelectionString(processInstanceReport);
-          shouldFilterItem={shouldFilterProcessInstanceReport}
+              }
-          placeholder="Choose a process instance perspective"
+              return null;
-          selectedItem={selectedItem}
+            }}
-        />
+            shouldFilterItem={shouldFilterProcessInstanceReport}
-      </Stack>
+            placeholder="Choose a process instance perspective"
+            selectedItem={selectedItem}
+          />
+        </Column>
+      </Grid>
     );
   }
   return null;