initial temp fixes on form fields

web/pages/components/config/form-textfield-with-submit.tsx

@@ -30,7 +30,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
   const [fieldStatus, setFieldStatus] = useState<StatusState>(null);
 
   const [hasChanged, setHasChanged] = useState(false);
-  // const [fieldValueForSubmit, setFieldValueForSubmit] = useState<string | number>('');
 
   const serverStatusData = useContext(ServerStatusContext);
   const { setFieldInConfigState } = serverStatusData || {};
@@ -64,7 +63,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
       // show submit button
       resetStates();
       setHasChanged(true);
-      // setFieldValueForSubmit(value);
     }
   }, [value]);
 
@@ -118,9 +116,11 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
       />
 
       {hasChanged ? (
-        <Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
-          Update
-        </Button>
+        <div className="update-button-container">
+          <Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
+            Update
+          </Button>
+        </div>
       ) : null}
     </div>
   );

web/pages/components/config/form-textfield.tsx

@@ -111,28 +111,41 @@ export default function TextField(props: TextFieldProps) {
 
   return (
     <div className={`textfield-container type-${type}`}>
-      {required ? <span className="required-label">*</span> : null}
-      <label htmlFor={fieldId} className="textfield-label">
-        {label}
-      </label>
-      <div className="textfield">
-        <Field
-          id={fieldId}
-          className={`field ${className} ${fieldId}`}
-          {...fieldProps}
-          allowClear
-          placeholder={placeholder}
-          maxLength={maxLength}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          onPressEnter={handlePressEnter}
-          disabled={disabled}
-          value={value}
-        />
+      {label ? (
+        <div className="label-side">
+          <label htmlFor={fieldId} className="textfield-label">
+            {required ? <span className="required-label">* </span> : null}
+            {label}:
+          </label>
+        </div>
+      ) : null}
+
+      <div className="input-side">
+        <div className="input-group">
+          <Field
+            id={fieldId}
+            className={`field ${className} ${fieldId}`}
+            {...fieldProps}
+            allowClear
+            placeholder={placeholder}
+            maxLength={maxLength}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onPressEnter={handlePressEnter}
+            disabled={disabled}
+            value={value}
+          />
+          
+        </div>
+        <div className="status-container">
+          {status ? <span className="status-icon">{statusIcon}</span> : null}
+          {status ? <span className="status-message">{statusMessage}</span> : null}
+        </div>
+        <p className="tip">
+          <InfoTip tip={tip} />
+        </p>
       </div>
-      <InfoTip tip={tip} />
-      {status ? statusMessage : null}
-      {status ? statusIcon : null}
+      
     </div>
   );
 }