From 43308a2e88306a02dd38545cce468912f84daa70 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Wed, 28 Jun 2023 20:27:19 -0400
Subject: [PATCH] fix(striker-ui): make form summary entry value scrollable

---
 striker-ui/components/FormSummary.tsx | 38 ++++++++++++++++++---------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/striker-ui/components/FormSummary.tsx b/striker-ui/components/FormSummary.tsx
index c7c752ec..dfaf552d 100644
--- a/striker-ui/components/FormSummary.tsx
+++ b/striker-ui/components/FormSummary.tsx
@@ -1,9 +1,10 @@
 import {
+  Box,
   List as MUIList,
   ListItem as MUIListItem,
   capitalize,
 } from '@mui/material';
-import { FC, ReactElement, createElement } from 'react';
+import { FC, ReactElement } from 'react';
 
 import FlexBox from './FlexBox';
 import { BodyText, MonoText, SensitiveText } from './Text';
@@ -15,13 +16,24 @@ const capEntryLabel: CapFormEntryLabel = (value) => {
   return capitalize(lcased);
 };
 
-const renderEntryValueWithPassword: RenderFormValueFunction = ({
-  entry,
-  key,
-}) => {
-  const textElement = /passw/i.test(key) ? SensitiveText : MonoText;
+const renderEntryValueWithMono: RenderFormValueFunction = ({ entry }) => (
+  <MonoText whiteSpace="nowrap">{String(entry)}</MonoText>
+);
 
-  return createElement(textElement, { monospaced: true }, String(entry));
+const renderEntryValueWithPassword: RenderFormValueFunction = (args) => {
+  const { entry, key } = args;
+
+  return /passw/i.test(key) ? (
+    <SensitiveText
+      revealButtonProps={{ sx: { marginRight: 0, padding: 0 } }}
+      monospaced
+      textLineHeight={null}
+    >
+      {String(entry)}
+    </SensitiveText>
+  ) : (
+    renderEntryValueWithMono(args)
+  );
 };
 
 const buildEntryList = ({
@@ -109,7 +121,9 @@ const FormSummary = <T extends FormEntries>({
   renderEntry = ({ depth, entry, getLabel, key, nest, renderValue }) => (
     <FlexBox fullWidth growFirst row maxWidth="100%">
       <BodyText>{getLabel({ cap: capEntryLabel, depth, entry, key })}</BodyText>
-      {!nest && renderValue({ depth, entry, key })}
+      <Box sx={{ maxWidth: '100%', overflowX: 'scroll' }}>
+        {!nest && renderValue({ depth, entry, key })}
+      </Box>
     </FlexBox>
   ),
   // Prop(s) that rely on other(s).
@@ -120,11 +134,9 @@ const FormSummary = <T extends FormEntries>({
       return <BodyText>none</BodyText>;
     }
 
-    return hasPassword ? (
-      renderEntryValueWithPassword(args)
-    ) : (
-      <MonoText>{String(entry)}</MonoText>
-    );
+    return hasPassword
+      ? renderEntryValueWithPassword(args)
+      : renderEntryValueWithMono(args);
   },
 }: FormSummaryProps<T>): ReturnType<FC<FormSummaryProps<T>>> =>
   buildEntryList({