From 59bc9e6b89d925b681c54e107e7706eaf5375664 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 30 Dec 2022 06:59:49 -0800
Subject: [PATCH] Fix awakening select display of input

---
 components/AwakeningSelect/index.scss |  6 ++++++
 components/AwakeningSelect/index.tsx  |  1 +
 components/Input/index.tsx            | 15 ++++++++++++++-
 components/WeaponModal/index.scss     |  6 ++++++
 4 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/components/AwakeningSelect/index.scss b/components/AwakeningSelect/index.scss
index 56c80b35..59799bff 100644
--- a/components/AwakeningSelect/index.scss
+++ b/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;
diff --git a/components/AwakeningSelect/index.tsx b/components/AwakeningSelect/index.tsx
index eb6158bb..5d2fa958 100644
--- a/components/AwakeningSelect/index.tsx
+++ b/components/AwakeningSelect/index.tsx
@@ -187,6 +187,7 @@ const AwakeningSelect = (props: Props) => {
             max={maxValue}
             step="1"
             onChange={handleInputChange}
+            visible={awakeningType !== -1}
             ref={awakeningLevelInput}
           />
         </div>
diff --git a/components/Input/index.tsx b/components/Input/index.tsx
index 054e1aa1..f63d657f 100644
--- a/components/Input/index.tsx
+++ b/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
diff --git a/components/WeaponModal/index.scss b/components/WeaponModal/index.scss
index 0fecc946..0983755d 100644
--- a/components/WeaponModal/index.scss
+++ b/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;