server input tweaks

src/ui/components/ServerLaunchSection.css

@@ -83,12 +83,16 @@
   box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
 }
 
+.ServerConfig .TextInputWrapper {
+  display: inline-block;
+}
+
 #ip {
   margin-right: 6px;
 }
 
 #port {
-  width: 15%;
+  width: 25%;
 }
 
 @media (max-width: 1040px) {

src/ui/components/common/DirInput.tsx

@@ -62,11 +62,16 @@ export default class DirInput extends React.Component<IProps, IState> {
   render() {
     return (
       <div className='DirInput'>
-        <TextInput value={this.state.value} placeholder={this.state.placeholder} readOnly={true} onChange={(text: string) => {
-          this.setState({ value: text })
+        <TextInput
+          value={this.state.value}
+          placeholder={this.state.placeholder}
+          clearable={true}
+          readOnly={true} onChange={(text: string) => {
+            this.setState({ value: text })
 
-          if (this.props.onChange) this.props.onChange(text)
-        }}/>
+            if (this.props.onChange) this.props.onChange(text)
+          }}
+        />
         <div className="FileSelectIcon" onClick={this.handleIconClick}>
           <img src={File} />
         </div>

src/ui/components/common/TextInput.tsx

@@ -42,13 +42,16 @@ export default class TextInput extends React.Component<IProps, IState> {
           this.setState({ value: e.target.value })
           if (this.props.onChange) this.props.onChange(e.target.value)
         }} />
-        <div className="TextClear" onClick={() => {
-          this.setState({ value: '' })
-
-          if (this.props.onChange) this.props.onChange('')
-        }}>
-          <img src={Close} className="TextInputClear" />
-        </div>
+        {
+          this.props.clearable ?
+            <div className="TextClear" onClick={() => {
+              this.setState({ value: '' })
+    
+              if (this.props.onChange) this.props.onChange('')
+            }}>
+              <img src={Close} className="TextInputClear" />
+            </div> : null
+        }
       </div>
     )
   }