feat: Improved how description is shown and improved margins

Author: kevinwang5658

src/Form.tsx

@@ -151,10 +151,10 @@ export const Form: React.FC<FormProps> = props => {
             )}
           </Box>
           {!editingField && (
-            <Box flexDirection="row">
+            <Box flexDirection="row" marginTop={1}>
               <Box flexDirection="column" flexGrow={1} width='40%'>
                 {!editingField && sections[currentTab].description && (
-                  <Box marginX={1} marginTop={1} flexDirection='column'>
+                  <Box marginX={1} flexDirection='column'>
                     <Text underline>Description:</Text>
                     <DescriptionRenderer description={sections[currentTab]?.description} />
                   </Box>

src/FormHeader.tsx

@@ -32,12 +32,8 @@ export const FormHeader: React.FC<
     <Box borderStyle="double" width="100%" flexDirection="column" ref={props.headerRef}>
       <Box width="100%">
         <Box flexGrow={1}>
-          <Text bold={true}>{props.form.title}</Text>
-        </Box>
-        <Box>
-          <Text>
-            {!props.editingField ? 'Use left and right arrow keys to navigate between resources' : 'Press ESC to cancel, or Enter to complete field'}
-          </Text>
+          <Text bold>{props.form.title}</Text>
+          <Text color={'gray'}>{` (${props.form.description})`}</Text>
         </Box>
       </Box>
       <Box width="100%">

src/ScrollArea.tsx

@@ -48,8 +48,8 @@ export function ScrollArea({height, isStart, children, numFields, editingMode})
     // Couple of custom logic baked into here to improve the user experience
     // isStart ensures that the first down event will not scroll. This is because initially nothing has focus so the first down gives focus to the first element
     // The children.length calculation calculates a rough estimate of the total height. The 3 is the height of the buttons at the bottom.
-    // The 4 is the fixed length of the brackets in the display.
-    if (isStart || ((numFields + (3 * 3) + 4) < height)) {
+    // The 5 is the fixed length of the static elements
+    if (isStart || ((numFields + (3 * 3) + 5) < height)) {
       setCanScroll(false);
       dispatch({
         type: 'RESET'

src/demo/Test.tsx

@@ -38,24 +38,27 @@ export function Test() {
           }, 1000)
         }}
         form={{
-          title: "Form title",
+          title: "codify import",
+          description: 'some parameters are required to continue import',
           sections: [
             {
               title: "asdf-global",
               fields: [
                 { type: 'string', name: 'plugin', label: 'plugin', required: true },
                 { type: 'string', name: 'version', label: 'version', required: true },
-              ]
+              ],
+              description: 'Asdf global sets the global version of a asdf installed plugin.'
             },
             {
               title: "asdf-install",
               description: 'Asdf install is responsible for installing an asdf resource',
               fields: [
-                { type: 'string', name: 'directory', label: 'directory', required: true },
+                { type: 'string', name: 'directory', label: 'directory', required: true, description: 'The directory to install.' },
               ]
             },
             {
               title: "asdf-local",
+              description: 'Asdf global sets the local version of a asdf installed plugin.',
               fields: [
                 { type: 'string', name: 'plugin', label: 'plugin', required: true },
                 { type: 'string', name: 'version', label: 'version', required: true },
@@ -65,6 +68,7 @@ export function Test() {
             },
             {
               title: "asdf-plugin",
+              // description: 'Asdf plugin installs a plugin.',
               fields: [
                 { type: 'string', name: 'plugin', label: 'plugin', required: true },
                 { type: 'string', name: 'versions', label: 'version'},

src/types.ts

@@ -50,6 +50,8 @@ export interface FormStructure {
   title?: string;
   /** A form contains several sections, each displayed as a tab. */
   sections: FormSection[];
+  /** A general description for the form */
+  description?: string;
 }
 
 /**