Merge pull request #99 from jedmund/fix-job-weapon-select

Fixes various issues with jobs and weapons

components/CharacterGrid/index.scss

@@ -4,6 +4,10 @@
   justify-content: center;
   margin: auto;
   max-width: 761px;
+
+  @include breakpoint(tablet) {
+    align-items: center;
+  }
 }
 
 #grid_characters {

components/Dialog/index.scss

@@ -12,6 +12,7 @@
   height: auto;
   min-width: $unit * 48;
   min-height: $unit-12x;
+  min-width: 580px;
   padding: $unit * $multiplier;
   position: absolute;
   top: 50%;

components/JobDropdown/index.tsx

@@ -41,7 +41,9 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
 
     // Set current job from state on mount
     useEffect(() => {
-      setCurrentJob(party.job)
+      if (party.job.id !== '-1') {
+        setCurrentJob(party.job)
+      }
     }, [])
 
     // Organize jobs into groups on mount
@@ -107,7 +109,6 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
     return (
       <Select
         value={currentJob ? currentJob.id : 'no-job'}
-        placeholder={'Select a class...'}
         open={open}
         onClick={openJobSelect}
         onOpenChange={() => setOpen(!open)}

components/JobSection/index.scss

@@ -1,12 +1,14 @@
 #Job {
-  align-items: center;
   box-sizing: border-box;
   display: flex;
   margin-bottom: $unit * 3;
 
   @include breakpoint(tablet) {
+    align-items: center;
     flex-direction: column;
     gap: $unit;
+    justify-content: center;
+    max-width: 447px;
   }
 
   select {
@@ -58,6 +60,10 @@
     width: $width;
     transition: box-shadow 0.15s ease-in-out;
 
+    @include breakpoint(tablet) {
+      margin-right: 0;
+    }
+
     @include breakpoint(phone) {
       aspect-ratio: 16/9;
       margin: 0;

components/WeaponUnit/index.tsx

@@ -390,7 +390,10 @@ const WeaponUnit = (props: Props) => {
 
   const unitContent = (
     <div className={classes}>
-      {props.editable && gridWeapon && canBeModified(gridWeapon) ? (
+      {props.editable &&
+      gridWeapon &&
+      gridWeapon.id &&
+      canBeModified(gridWeapon) ? (
         <WeaponModal gridWeapon={gridWeapon}>
           <div>
             <Button accessoryIcon={<SettingsIcon />} />