From 5b74736769fbf6c4c6ea2bb17c96ccc8f3745007 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 22 Jul 2022 13:29:01 -0400
Subject: [PATCH] fix(striker-ui): move suggest button and ensure help message
 fills width

---
 striker-ui/components/StrikerInitForm.tsx | 74 +++++++++++++----------
 1 file changed, 43 insertions(+), 31 deletions(-)

diff --git a/striker-ui/components/StrikerInitForm.tsx b/striker-ui/components/StrikerInitForm.tsx
index 6f5c62ee..a19006a9 100644
--- a/striker-ui/components/StrikerInitForm.tsx
+++ b/striker-ui/components/StrikerInitForm.tsx
@@ -259,25 +259,29 @@ const StrikerInitGeneralForm: FC = () => {
           onChange={handleOrganizationNameInputOnChange}
           value={organizationNameInput}
         />
-        <FlexBox row>
-          <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: '7em',
-              },
-            }}
-            label="Prefix"
-            onChange={handleOrganizationPrefixInputOnChange}
-            value={organizationPrefixInput}
-          />
-          <SuggestButton onClick={handleOrganizationPrefixSuggest} />
-        </FlexBox>
+        <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={{
+            endAdornment: (
+              <SuggestButton onClick={handleOrganizationPrefixSuggest} />
+            ),
+            inputProps: {
+              maxLength: MAX_ORGANIZATION_PREFIX_LENGTH,
+              style: { width: '2.5em' },
+            },
+            onBlur: populateHostNameInputOnBlur,
+            sx: {
+              minWidth: 'min-content',
+              width: 'fit-content',
+            },
+          }}
+          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
-            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}
-          />
-          <SuggestButton onClick={handlerHostNameSuggest} />
-        </FlexBox>
+        <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"
+          inputProps={{
+            endAdornment: <SuggestButton onClick={handlerHostNameSuggest} />,
+            inputProps: {
+              style: {
+                minWidth: '4em',
+              },
+            },
+            sx: {
+              minWidth: 'min-content',
+            },
+          }}
+          label="Host name"
+          onChange={handleHostNameInputOnChange}
+          value={hostNameInput}
+        />
       </FlexBox>
     </MUIBox>
   );