fix(striker-ui): add input explanation and adjust input length

striker-ui/components/StrikerInitForm.tsx

@@ -1,15 +1,17 @@
 import { Dispatch, FC, SetStateAction, useState } from 'react';
 import { Box as MUIBox } from '@mui/material';
 
+import FlexBox from './FlexBox';
 import NetworkInitForm from './NetworkInitForm';
 import { OutlinedInputProps } from './OutlinedInput';
 import OutlinedInputWithLabel from './OutlinedInputWithLabel';
+import pad from '../lib/pad';
 import { Panel, PanelHeader } from './Panels';
 import { HeaderText } from './Text';
-import pad from '../lib/pad';
 
 const MAX_ORGANIZATION_PREFIX_LENGTH = 5;
 const MIN_ORGANIZATION_PREFIX_LENGTH = 2;
+const MAX_HOST_NUMBER_LENGTH = 2;
 
 const MAP_TO_ORGANIZATION_PREFIX_BUILDER: Record<
   number,
@@ -161,14 +163,23 @@ const StrikerInitGeneralForm: FC = () => {
     <MUIBox
       sx={{
         display: 'flex',
-        flexDirection: 'column',
+        flexDirection: { xs: 'column', sm: 'row' },
+
+        '& > *': {
+          flexBasis: '50%',
+        },
 
         '& > :not(:first-child)': {
-          marginTop: '1em',
+          marginLeft: { xs: 0, sm: '1em' },
+          marginTop: { xs: '1em', sm: 0 },
         },
       }}
     >
+      <FlexBox>
         <OutlinedInputWithLabel
+          helpMessageBoxProps={{
+            text: 'Name of the organization that maintains this Anvil! system. You can enter anything that makes sense to you.',
+          }}
           id="striker-init-general-organization-name"
           inputProps={{
             onBlur: populateOrganizationPrefixInputOnBlur,
@@ -178,38 +189,65 @@ const StrikerInitGeneralForm: FC = () => {
           value={organizationNameInput}
         />
         <OutlinedInputWithLabel
+          helpMessageBoxProps={{
+            text: "Alphanumberic short-form of the organization name. It's used as the prefix for host names.",
+          }}
           id="striker-init-general-organization-prefix"
           inputProps={{
+            inputProps: { maxLength: MAX_ORGANIZATION_PREFIX_LENGTH },
             onBlur: populateHostNameInputOnBlur,
+            sx: {
+              width: '8em',
+            },
           }}
-        label="Organization prefix"
+          label="Prefix"
           onChange={handleOrganizationPrefixInputOnChange}
           value={organizationPrefixInput}
         />
+      </FlexBox>
+      <FlexBox>
         <OutlinedInputWithLabel
+          helpMessageBoxProps={{
+            text: "Domain name for this striker. It's also the default domain used when creating new install manifests.",
+          }}
           id="striker-init-general-domain-name"
-        label="Domain name"
           inputProps={{
             onBlur: populateHostNameInputOnBlur,
+            sx: {
+              minWidth: { sm: '16em' },
+              width: { xs: '100%', sm: '50%' },
+            },
           }}
+          label="Domain name"
           onChange={handleDomainNameInputOnChange}
           value={domainNameInput}
         />
         <OutlinedInputWithLabel
+          helpMessageBoxProps={{
+            text: "Number or count of this striker; this should be '1' for the first striker, '2' for the second striker, and such.",
+          }}
           id="striker-init-general-host-number"
           inputProps={{
+            inputProps: { maxLength: MAX_HOST_NUMBER_LENGTH },
             onBlur: populateHostNameInputOnBlur,
+            sx: {
+              width: '5em',
+            },
           }}
-        label="Host number"
+          label="Host #"
           onChange={handleHostNumberInputOnChange}
           value={hostNumberInput}
         />
         <OutlinedInputWithLabel
+          helpMessageBoxProps={{
+            text: "Host name for this striker. It's usually a good idea to use the auto-generated value.",
+          }}
           id="striker-init-general-host-name"
           label="Host name"
           onChange={handleHostNameInputOnChange}
           value={hostNameInput}
         />
+      </FlexBox>
     </MUIBox>
   );
 };
@@ -219,17 +257,10 @@ const StrikerInitForm: FC = () => (
     <PanelHeader>
       <HeaderText text="Initialize striker" />
     </PanelHeader>
-    <MUIBox
+    <FlexBox>
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-
-        '& > :not(:first-child)': { marginTop: '1em' },
-      }}
-    >
       <StrikerInitGeneralForm />
       <NetworkInitForm />
-    </MUIBox>
+    </FlexBox>
   </Panel>
 );