fix(striker-ui): move suggest button and ensure help message fills width

striker-ui/components/StrikerInitForm.tsx

@@ -259,25 +259,29 @@ const StrikerInitGeneralForm: FC = () => {
           onChange={handleOrganizationNameInputOnChange}
           value={organizationNameInput}
         />
-        <FlexBox row>
+        <OutlinedInputWithLabel
-          <OutlinedInputWithLabel
+          helpMessageBoxProps={{
-            helpMessageBoxProps={{
+            text: "Alphanumberic short-form of the organization name. It's used as the prefix for host names.",
-              text: "Alphanumberic short-form of the organization name. It's used as the prefix for host names.",
+          }}
-            }}
+          id="striker-init-general-organization-prefix"
-            id="striker-init-general-organization-prefix"
+          inputProps={{
-            inputProps={{
+            endAdornment: (
-              inputProps: { maxLength: MAX_ORGANIZATION_PREFIX_LENGTH },
+              <SuggestButton onClick={handleOrganizationPrefixSuggest} />
-              onBlur: populateHostNameInputOnBlur,
+            ),
-              sx: {
+            inputProps: {
-                width: '7em',
+              maxLength: MAX_ORGANIZATION_PREFIX_LENGTH,
-              },
+              style: { width: '2.5em' },
-            }}
+            },
-            label="Prefix"
+            onBlur: populateHostNameInputOnBlur,
-            onChange={handleOrganizationPrefixInputOnChange}
+            sx: {
-            value={organizationPrefixInput}
+              minWidth: 'min-content',
-          />
+              width: 'fit-content',
-          <SuggestButton onClick={handleOrganizationPrefixSuggest} />
+            },
-        </FlexBox>
+          }}
+          label="Prefix"
+          onChange={handleOrganizationPrefixInputOnChange}
+          value={organizationPrefixInput}
+        />
       </FlexBox>
       <FlexBox>
         <OutlinedInputWithLabel
@@ -312,18 +316,26 @@ const StrikerInitGeneralForm: FC = () => {
           onChange={handleHostNumberInputOnChange}
           value={hostNumberInput}
         />
-        <FlexBox row sx={{ '& > :first-child': { flexGrow: 1 } }}>
+        <OutlinedInputWithLabel
-          <OutlinedInputWithLabel
+          helpMessageBoxProps={{
-            helpMessageBoxProps={{
+            text: "Host name for this striker. It's usually a good idea to use the auto-generated value.",
-              text: "Host name for this striker. It's usually a good idea to use the auto-generated value.",
+          }}
-            }}
+          id="striker-init-general-host-name"
-            id="striker-init-general-host-name"
+          inputProps={{
-            label="Host name"
+            endAdornment: <SuggestButton onClick={handlerHostNameSuggest} />,
-            onChange={handleHostNameInputOnChange}
+            inputProps: {
-            value={hostNameInput}
+              style: {
-          />
+                minWidth: '4em',
-          <SuggestButton onClick={handlerHostNameSuggest} />
+              },
-        </FlexBox>
+            },
+            sx: {
+              minWidth: 'min-content',
+            },
+          }}
+          label="Host name"
+          onChange={handleHostNameInputOnChange}
+          value={hostNameInput}
+        />
       </FlexBox>
     </MUIBox>
   );