Task show toggle instructions (#1429)

* added support to toggle full and collapsed instructions on the task show page w/ burnettk

* collapse task show instructions by default w/ burnettk

---------

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

spiffworkflow-frontend/src/components/InstructionsForEndUser.tsx

@@ -14,6 +14,7 @@ type OwnProps = {
   taskInstructionForEndUser?: TaskInstructionForEndUser;
   defaultMessage?: string;
   allowCollapse?: boolean;
+  className?: string;
 };
 
 export default function InstructionsForEndUser({
@@ -21,6 +22,7 @@ export default function InstructionsForEndUser({
   taskInstructionForEndUser,
   defaultMessage = '',
   allowCollapse = false,
+  className,
 }: OwnProps) {
   const [collapsed, setCollapsed] = useState<boolean>(false);
   const [collapsable, setCollapsable] = useState<boolean>(false);
@@ -87,15 +89,15 @@ export default function InstructionsForEndUser({
     return null;
   };
 
-  let className = 'markdown';
+  let mdClassName = 'markdown';
   if (collapsed) {
-    className += ' markdown-collapsed';
+    mdClassName += ' markdown-collapsed';
   }
 
   if (instructions) {
     return (
-      <div>
-        <div className={className}>
+      <div className={className}>
+        <div className={mdClassName}>
           {/*
           https://www.npmjs.com/package/@uiw/react-md-editor switches to dark mode by default by respecting @media (prefers-color-scheme: dark)
           This makes it look like our site is broken, so until the rest of the site supports dark mode, turn off dark mode for this component.

spiffworkflow-frontend/src/routes/TaskShow.tsx

@@ -463,7 +463,13 @@ export default function TaskShow() {
   if (basicTask && taskData) {
     pageElements.push({
       key: 'instructions-for-end-user',
-      component: <InstructionsForEndUser task={taskWithTaskData} />,
+      component: (
+        <InstructionsForEndUser
+          task={taskWithTaskData}
+          allowCollapse
+          className="with-bottom-margin"
+        />
+      ),
     });
     pageElements.push({ key: 'main-form', component: formElement() });
   } else if (!atLeastOneTaskFetchHasError) {