From 972a03bf6b4f0ba08a50ee1f5cf7a0361c0077b5 Mon Sep 17 00:00:00 2001
From: Jeff Ohrstrom <johrstrom@osc.edu>
Date: Mon, 23 Sep 2024 16:33:37 -0400
Subject: [PATCH] restructure a little to get a better layout (#3793)

---
 apps/dashboard/app/javascript/projects.js                 | 1 +
 apps/dashboard/app/views/projects/_job_details.html.erb   | 3 ++-
 .../app/views/projects/_job_details_content.html.erb      | 2 +-
 apps/dashboard/app/views/projects/show.html.erb           | 8 ++++++--
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/app/javascript/projects.js b/apps/dashboard/app/javascript/projects.js
index 649577122d..ce41df13ce 100644
--- a/apps/dashboard/app/javascript/projects.js
+++ b/apps/dashboard/app/javascript/projects.js
@@ -82,6 +82,7 @@ function moveCompletedPanel(id, newHTML) {
 
   const div = document.createElement('div');
   div.id = id;
+  div.classList.add('col-md-4');
 
   const row = document.getElementById('completed_jobs');
   row.appendChild(div);
diff --git a/apps/dashboard/app/views/projects/_job_details.html.erb b/apps/dashboard/app/views/projects/_job_details.html.erb
index da436676ef..284c750d9f 100644
--- a/apps/dashboard/app/views/projects/_job_details.html.erb
+++ b/apps/dashboard/app/views/projects/_job_details.html.erb
@@ -5,7 +5,8 @@
 <div id="<%= id %>" data-job-poller="true"
   data-job-cluster="<%= job.cluster %>"
   data-job-id="<%= job.id %>"
-  data-job-status="<%= job.status.to_s %>">
+  data-job-status="<%= job.status.to_s %>"
+  class="col-md-4">
 
   <div class="d-flex justify-content-center">
     <div class="spinner-border" role="status">
diff --git a/apps/dashboard/app/views/projects/_job_details_content.html.erb b/apps/dashboard/app/views/projects/_job_details_content.html.erb
index 44163aad77..3cb30b6821 100644
--- a/apps/dashboard/app/views/projects/_job_details_content.html.erb
+++ b/apps/dashboard/app/views/projects/_job_details_content.html.erb
@@ -9,7 +9,7 @@
       <%= job.id %> <%= status_text(job.status.to_s) %>
     </span>
   </button>
-  <div class="collapse col-md-4" id="<%= id %>_data">
+  <div class="collapse" id="<%= id %>_data">
     <div class="card card-body">
       <table class="table table-bordered table-sm m-0 mb-2">
         <% job.to_human_display.each do |name, value| %>
diff --git a/apps/dashboard/app/views/projects/show.html.erb b/apps/dashboard/app/views/projects/show.html.erb
index b44b9fc472..b394d7703e 100644
--- a/apps/dashboard/app/views/projects/show.html.erb
+++ b/apps/dashboard/app/views/projects/show.html.erb
@@ -64,8 +64,12 @@
 
     <div class="row">
       <h2 class="h3 d-flex justify-content-center">Completed Jobs</h2>
-      <div id="completed_jobs">
-        <%= render(partial: 'job_details_content', collection: @project.completed_jobs, as: :job) %>
+      <div id="completed_jobs" class="row">
+        <%- @project.completed_jobs.each do |job| -%>
+        <div class="col-md-4" id="<%= "job_#{job.cluster}_#{job.id}" %>">
+          <%= render(partial: 'job_details_content', locals: { job: job }) %>
+        </div>
+        <%- end -%>
       </div>
     </div>
   </div>