From 224e4c4235c5f9279cff43ddf7aefbd338408c83 Mon Sep 17 00:00:00 2001
From: ScriptSmith <ScriptSmith@users.noreply.github.com>
Date: Fri, 16 Aug 2024 15:59:39 +1000
Subject: [PATCH 1/3] Add wrapping to CopyBox

---
 src/components/output/CopyBox.js | 57 ++++++++++++++++++--------------
 1 file changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/components/output/CopyBox.js b/src/components/output/CopyBox.js
index 47cd2944..247cbc36 100644
--- a/src/components/output/CopyBox.js
+++ b/src/components/output/CopyBox.js
@@ -15,14 +15,16 @@ export default function CopyBox({
   children,
   editable = false,
   defaultRows = 10,
+  wrap = true,
 }) {
   const [hover, setHover] = useState(false);
   const [copied, setCopied] = useState(false);
 
   const borderColor = useColorModeValue("gray.200", "gray.500");
   const bg = useColorModeValue("gray.50", "gray.800");
+  const wrapStyle = { textWrap: wrap ? "wrap" : "nowrap" };
 
-  const Wrapper = editable ? Editable : Box;
+  const Content = editable ? Editable : Box;
 
   const [text, setText] = useState(
     Array.isArray(children) ? children.join("") : children,
@@ -33,32 +35,37 @@ export default function CopyBox({
   }, [children]);
 
   return (
-    <Wrapper
-      as="pre"
-      p="4"
-      rounded="md"
-      border="1px"
-      borderColor={borderColor}
-      bg={bg}
-      fontSize="sm"
-      whiteSpace="pre-wrap"
-      wordBreak="break-all"
-      w="full"
+    <Box
+      position="relative"
       onMouseOver={() => setHover(true)}
       onMouseOut={() => setHover(false)}
-      position="relative"
-      defaultValue={text}
-      key={text}
-      onSubmit={(e) => setText(e)}
     >
-      {editable ? (
-        <>
-          <EditablePreview />
-          <EditableTextarea rows={defaultRows} />
-        </>
-      ) : (
-        text
-      )}
+      <Content
+        as="pre"
+        p="4"
+        rounded="md"
+        border="1px"
+        borderColor={borderColor}
+        bg={bg}
+        fontSize="sm"
+        whiteSpace="pre-wrap"
+        wordBreak="break-all"
+        overflowX="auto"
+        w="full"
+        defaultValue={text}
+        key={text}
+        onSubmit={(e) => setText(e)}
+        sx={wrapStyle}
+      >
+        {editable ? (
+          <>
+            <EditablePreview />
+            <EditableTextarea rows={defaultRows} sx={wrapStyle} />
+          </>
+        ) : (
+          text
+        )}
+      </Content>
       {hover && (
         <Tooltip
           label={copied ? "Copied!" : "Copy to clipboard"}
@@ -81,6 +88,6 @@ export default function CopyBox({
           </Button>
         </Tooltip>
       )}
-    </Wrapper>
+    </Box>
   );
 }

From d4eadac000ee1a533a5d09f7604164e3117f36b2 Mon Sep 17 00:00:00 2001
From: ScriptSmith <ScriptSmith@users.noreply.github.com>
Date: Fri, 16 Aug 2024 15:59:52 +1000
Subject: [PATCH 2/3] Wrap batch job script

---
 src/components/tool/guide/Instructions/StartInstructions.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/tool/guide/Instructions/StartInstructions.js b/src/components/tool/guide/Instructions/StartInstructions.js
index 923fa647..1bfddcee 100644
--- a/src/components/tool/guide/Instructions/StartInstructions.js
+++ b/src/components/tool/guide/Instructions/StartInstructions.js
@@ -112,7 +112,9 @@ export function LyraStartInstructions({
               textAfterLink={"."}
             />
           </InstructionText>
-          <CopyBox editable={true}>{batchJobScript.join("\n")}</CopyBox>
+          <CopyBox editable={true} wrap={false}>
+            {batchJobScript.join("\n")}
+          </CopyBox>
           <InstructionText>
             You may either:
             <RadioGroup defaultValue="file" onChange={setScriptInput}>

From 406357d1d171720ecfc0eebebd6387b9cdbc9758 Mon Sep 17 00:00:00 2001
From: ScriptSmith <ScriptSmith@users.noreply.github.com>
Date: Fri, 16 Aug 2024 16:00:01 +1000
Subject: [PATCH 3/3] Wrap job status output

---
 .../tool/guide/Instructions/StartInstructions.js       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/tool/guide/Instructions/StartInstructions.js b/src/components/tool/guide/Instructions/StartInstructions.js
index 1bfddcee..7706bf8d 100644
--- a/src/components/tool/guide/Instructions/StartInstructions.js
+++ b/src/components/tool/guide/Instructions/StartInstructions.js
@@ -177,12 +177,12 @@ export function LyraStartInstructions({
           <InstructionText>
             The output will look similar to the following:
           </InstructionText>
-          <CopyBox>
+          <CopyBox wrap={false}>
             {`pbs: 
-                                                                 Req'd  Req'd   Elap
-Job ID               Username Queue    Jobname  SessID NDS TSK Memory Time  S Time
--------------------- -------- -------- -------- ------ --- --- ------ ----- - -----
-1234567.pbs          username quick    job-name    --    1   4   32gb 01:00 Q   --`}
+                                                   Req'd  Req'd   Elap
+Job ID      Username Queue Jobname  SessID NDS TSK Memory Time  S Time
+----------- -------- ----- -------- ------ --- --- ------ ----- - -----
+1234567.pbs username quick job-name    --    1   4   32gb 01:00 Q   --`}
           </CopyBox>
           <InstructionText>
             The job status will be shown in the <Code>S</Code> column. Possible