From 3160e1e91260fbccf867268ea4e752955d9e3447 Mon Sep 17 00:00:00 2001
From: Darin Kelkhoff <darin.kelkhoff@gmail.com>
Date: Wed, 19 Oct 2022 18:07:22 -0500
Subject: [PATCH] Update to scroll previewRecords

---
 .../components/QValidationReview.tsx          | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/qqq/pages/process-run/components/QValidationReview.tsx b/src/qqq/pages/process-run/components/QValidationReview.tsx
index fe50296..94ecce0 100644
--- a/src/qqq/pages/process-run/components/QValidationReview.tsx
+++ b/src/qqq/pages/process-run/components/QValidationReview.tsx
@@ -24,7 +24,7 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
 import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {Button, FormControlLabel, ListItem, Radio, RadioGroup, tooltipClasses, TooltipProps} from "@mui/material";
+import {Box, Button, FormControlLabel, ListItem, Radio, RadioGroup, tooltipClasses, TooltipProps} from "@mui/material";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
@@ -252,17 +252,21 @@ function QValidationReview({
                </MDBox>
             </MDTypography>
             <MDTypography color="body" variant="body2" component="div">
-               {
-                  previewRecords && previewRecords[previewRecordIndex] && step.recordListFields.map((field) => (
-                     <MDBox key={field.name} style={{marginBottom: "12px"}}>
-                        <b>{`${field.label}:`}</b>
-                        {" "}
-                        &nbsp;
-                        {" "}
-                        {QValueUtils.getDisplayValue(field, previewRecords[previewRecordIndex])}
-                     </MDBox>
-                  ))
-               }
+               <Box sx={{maxHeight: "calc(100vh - 640px)", overflow: "auto", minHeight: "300px", marginRight: "-40px"}}>
+                  <Box sx={{paddingRight: "40px"}}>
+                     {
+                        previewRecords && previewRecords[previewRecordIndex] && step.recordListFields.map((field) => (
+                           <MDBox key={field.name} style={{marginBottom: "12px"}}>
+                              <b>{`${field.label}:`}</b>
+                              {" "}
+                           &nbsp;
+                              {" "}
+                              {QValueUtils.getDisplayValue(field, previewRecords[previewRecordIndex])}
+                           </MDBox>
+                        ))
+                     }
+                  </Box>
+               </Box>
                {
                   previewRecords && previewRecords.length > 0 && (
                      <MDBox display="flex" justifyContent="space-between" alignItems="center">