Fix spacing and responsive

DSACMS · Oct 1, 2024 · 5c14935 · 5c14935
1 parent e1c1989
commit 5c14935
Showing 1 changed file with 11 additions and 13 deletions.
diff --git a/app/app/views/cbv/synchronizations/show.html.erb b/app/app/views/cbv/synchronizations/show.html.erb
@@ -3,11 +3,9 @@
   <h1>
     <%= t(".header") %>
   </h1>
-  <div class="usa-prose">
-    <p>
-      <%= t(".fetching_payroll_description") %>
-    </p>
-  </div>
+  <p class="usa-prose">
+    <%= t(".fetching_payroll_description") %>
+  </p>
   <%= form_with url: next_path, method: :get, class: "display-none", data: { 'cbv-synchronizations-target': "form" } do |f| %>
     <input type="hidden" name="user[account_id]" value="<%= params[:user][:account_id] %>" data-cbv-synchronizations-target="userAccountId">
   <% end %>
@@ -16,32 +14,32 @@
   >
     <div class="grid-row">
       <div
-        class="grid-col-fill"
+        class="tablet:grid-col-2 grid-col-fill"
         data-cbv-synchronizations-target="incomeJob"
       >
         <%= render partial: "cbv/synchronizations/indicator", locals: { completed: job_completed?("income") } %>
-        <p><%= t(".jobs.income") %></p>
+        <h4 class="margin-top-2px"><%= t(".jobs.income") %></h4>
       </div>
       <div
-        class="grid-col-fill"
+        class="tablet:grid-col-2 grid-col-fill"
         data-cbv-synchronizations-target="employmentJob"
       >
         <%= render partial: "cbv/synchronizations/indicator", locals: { completed: job_completed?("employment") } %>
-        <p><%= t(".jobs.employment") %></p>
+        <h4 class="margin-top-2px"><%= t(".jobs.employment") %></h4>
       </div>
       <div
-        class="grid-col-fill"
+        class="tablet:grid-col-2 grid-col-fill"
         data-cbv-synchronizations-target="paystubsJob"
       >
         <%= render partial: "cbv/synchronizations/indicator", locals: { completed: job_completed?("paystubs") } %>
-        <p><%= t(".jobs.paystubs") %></p>
+        <h4 class="margin-top-2px"><%= t(".jobs.paystubs") %></h4>
       </div>
       <div
-        class="grid-col-fill"
+        class="tablet:grid-col-2 grid-col-fill"
         data-cbv-synchronizations-target="identityJob"
       >
         <%= render partial: "cbv/synchronizations/indicator", locals: { completed: job_completed?("identity") } %>
-        <p><%= t(".jobs.identity") %></p>
+        <h4 class="margin-top-2px"><%= t(".jobs.identity") %></h4>
       </div>
     </div>
   </div>