Clean up styling a bit (#1301)

app/views/organizations/staff/fosterer_invitations/_form.html.erb

@@ -1,54 +1,54 @@
-<div class="card mb-4">
-  <div class="card-body">
-    <!-- form -->
-    <%= bootstrap_form_with model: user, url: invitation_path(user) do |form| %>
-      <div class="row gx-3">
+<%= bootstrap_form_with model: user, url: invitation_path(user) do |form| %>
+  <div class="card">
+    <div class="card-header">
+      Foster Details
+    </div>
+
+    <div class="card-body">
+      <!-- form -->
+      <div class="vstack gap-4">
         <!-- form group -->
-        <div class="mb-3 col-md-6 col-12">
-          <div class="input-group me-3">
-            <%= form.text_field :first_name, class: "form-control", required: true %>
-          </div>
+        <div class="input-group">
+          <%= form.text_field :first_name, class: "form-control", wrapper_class: "w-100", required: true %>
         </div>
+
         <!-- form group -->
-        <div class="mb-3 col-md-6 col-12">
-          <div class="input-group me-3">
-            <%= form.text_field :last_name, class: "form-control", required: true %>
-          </div>
+        <div class="input-group me-3">
+          <%= form.text_field :last_name, class: "form-control", wrapper_class: "w-100", required: true %>
         </div>
+
         <!-- form group -->
-        <div class="mb-3 col-12">
-          <div class="input-group">
-            <%= form.text_field :email, class: "form-control", required: true %>
-          </div>
+        <div class="input-group">
+          <%= form.text_field :email, class: "form-control", required: true, wrapper_class: "w-100" %>
         </div>
+
         <%= form.fields_for :person do |person_form| %>
           <!-- form group -->
-          <div class="mb-3 col-12">
-            <div class="input-group">
-              <%= person_form.telephone_field :phone_number,
-                class: "form-control",
-                required: false
-              %>
-            </div>
+          <div class="input-group">
+            <%= person_form.telephone_field :phone_number,
+              class: "form-control",
+              wrapper_class: "w-100",
+              required: false
+            %>
           </div>
+
           <!-- form group -->
-          <div class="mb-3 col-12">
-            <div class="input-group">
-              <!-- Nested Form for Locations Table -->
-              <div class="form-group bigger" data-controller="country-state">
-                <%= person_form.fields_for :location, user.person.location do |location_form| %>
-                  <%= render 'shared/location_fields', form: location_form %>
-                <% end %>
-              </div>
+          <div class="input-group">
+            <!-- Nested Form for Locations Table -->
+            <div class="form-group bigger w-100" data-controller="country-state">
+              <%= person_form.fields_for :location, user.person.location do |location_form| %>
+                <%= render 'shared/location_fields', form: location_form %>
+              <% end %>
             </div>
           </div>
         <% end %>
+
         <%= form.hidden_field :roles, value: :fosterer %>
-        <!-- button -->
-        <div class="col-12 mt-3">
-          <%= form.submit t("general.send_invite"), class: "btn btn-primary" %>
-        </div>
       </div>
-    <% end %>
+    </div>
+
+    <div class="card-footer">
+      <%= form.submit t("general.send_invite"), class: "btn btn-primary" %>
+    </div>
   </div>
-</div>
+<% end %>

app/views/organizations/staff/fosterer_invitations/new.html.erb

@@ -1,6 +1,8 @@
 <%= render DashboardPageComponent.new(crumb: :invite_fosterer) do |c| %>
   <% c.with_header_title { t("invite_fosterer") } %>
   <% c.with_body do |b| %>
-    <%= render "organizations/staff/fosterer_invitations/form", user: @user %>
+    <div class='mx-auto' style='max-width: 600px'>
+      <%= render "organizations/staff/fosterer_invitations/form", user: @user %>
+    </div>
   <% end %>
 <% end %>