Fix awakening select display of input

components/AwakeningSelect/index.scss

@@ -20,8 +20,14 @@
     }
 
     .Label {
+      display: none;
       flex-grow: 0;
 
+      &.Visible {
+        display: block;
+        width: auto;
+      }
+
       .Input {
         min-width: $unit * 12;
         width: inherit;

components/AwakeningSelect/index.tsx

@@ -187,6 +187,7 @@ const AwakeningSelect = (props: Props) => {
             max={maxValue}
             step="1"
             onChange={handleInputChange}
+            visible={awakeningType !== -1}
             ref={awakeningLevelInput}
           />
         </div>

components/Input/index.tsx

@@ -8,10 +8,15 @@ interface Props
     React.InputHTMLAttributes<HTMLInputElement>,
     HTMLInputElement
   > {
+  visible?: boolean
   error?: string
   label?: string
 }
 
+const defaultProps = {
+  visible: true,
+}
+
 const Input = React.forwardRef<HTMLInputElement, Props>(function Input(
   props: Props,
   forwardedRef
@@ -34,7 +39,13 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function Input(
   }
 
   return (
-    <label className="Label" htmlFor={props.name}>
+    <label
+      className={classNames({
+        Label: true,
+        Visible: props.visible,
+      })}
+      htmlFor={props.name}
+    >
       <input
         {...inputProps}
         autoComplete="off"
@@ -52,4 +63,6 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function Input(
   )
 })
 
+Input.defaultProps = defaultProps
+
 export default Input

components/WeaponModal/index.scss

@@ -1,4 +1,10 @@
 .Weapon.Dialog {
+  min-width: 480px;
+
+  @include breakpoint(phone) {
+    min-width: inherit;
+  }
+
   .mods {
     display: flex;
     flex-direction: column;