more styling for new portfolio member modal

templates/components/modal.html

@@ -1,8 +1,8 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro Modal(name, dismissable=False) -%}
+{% macro Modal(name, dismissable=False, classes="") -%}
   <div v-show="activeModal === '{{name}}'" v-cloak>
-    <div id='modal--{{name}}' class='modal {% if dismissable %}modal--dismissable{% endif%}'>
+    <div id='modal--{{name}}' class='modal {% if dismissable %}modal--dismissable{% endif%} {{ classes }}'>
       <div class='modal__container'>
         <div class='modal__dialog' role='dialog' aria-modal='true'>
           <div class='modal__body'>

templates/components/multi_step_modal_form.html

@@ -31,9 +31,9 @@
       <button v-on:click="openModal('{{ name }}')" type="button" class="icon-link">{{ button_text }}</button>
       <form action="{{ form_action }}" method="POST">
         {{ form.csrf_token }}
-        {% call Modal(name=name, dismissable=dismissable) %}
+        {% call Modal(name=name, dismissable=dismissable, classes="wide") %}
           {% for step in steps %}
-            <div class="modal--form" v-show="step === {{ loop.index0 }}">
+            <div class="modal__form" v-show="step === {{ loop.index0 }}">
               {{ FormSteps(step_count, loop.index) }}
               {{ step }}
             </div>

templates/components/options_input.html

@@ -7,7 +7,8 @@
     inline-template
     {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
     {% if field.data and field.data != "None" %}v-bind:initial-value="'{{ field.data }}'"{% endif %}
-    key='{{ field.name }}'>
+    key='{{ field.name }}'
+    >
     <div
       v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">