From 33c0b5e7b95a3048be73e70267be2a6a9208868a Mon Sep 17 00:00:00 2001
From: Braeden Singleton <bsingleton@osc.edu>
Date: Fri, 28 Nov 2025 16:52:19 -0500
Subject: [PATCH 1/4] format breakpoints in show page

---
 .../app/assets/stylesheets/projects.scss      | 59 ++++++++++++++++++
 apps/dashboard/app/javascript/projects.js     |  2 +-
 .../app/views/projects/_job_details.html.erb  |  2 +-
 .../projects/_job_details_content.html.erb    |  6 +-
 .../app/views/projects/show.html.erb          | 62 ++++++++++---------
 5 files changed, 96 insertions(+), 35 deletions(-)

diff --git a/apps/dashboard/app/assets/stylesheets/projects.scss b/apps/dashboard/app/assets/stylesheets/projects.scss
index ef3d52e912..18a1f05a19 100644
--- a/apps/dashboard/app/assets/stylesheets/projects.scss
+++ b/apps/dashboard/app/assets/stylesheets/projects.scss
@@ -67,3 +67,62 @@
   margin: .2rem 0px;
   text-wrap:nowrap;
 }
+
+#project-jobs-files-col {
+  padding-right: 0px;
+
+  .jobs-files-item {
+    padding-right: 0px;
+  }
+
+  #jobs-item {
+    @media (min-width: 992px) {
+      padding-right: calc(var(--bs-gutter-x) * 0.5);
+    }
+  }
+}
+
+.pill-box {
+  display: flex;
+  justify-content: space-evenly;
+  margin: 0px;
+  padding: 0px;
+
+  .job-pill {
+    width: min-content;
+    padding: 0rem 1rem;
+
+    button.badge {
+      color: var(--bs-btn-hover-color);
+    }
+
+    button.badge.collapsed {
+      color: var(--bs-badge-color);
+    }
+
+    button.badge.collapsed:hover {
+      color: var(--bs-btn-hover-color);
+    }
+  }
+
+  .job-popup {
+    position: absolute;
+    left: calc(6vw - 7px);
+    width: 88.5vw;
+
+    @media (min-width: 576px) {
+      left: calc(37vw - 8.5px);
+      width: 59.5vw;
+    }
+
+    @media (min-width: 992px) {
+      left: calc(19vw - 9px);
+      width: 30.5vw;
+    }
+
+    @media (min-width: 1600px) {
+      left: 18.5vw;
+      width: 30.5vw;
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/dashboard/app/javascript/projects.js b/apps/dashboard/app/javascript/projects.js
index 56b8c77fab..74528e7543 100644
--- a/apps/dashboard/app/javascript/projects.js
+++ b/apps/dashboard/app/javascript/projects.js
@@ -82,7 +82,7 @@ function moveCompletedPanel(id, newHTML) {
 
   const div = document.createElement('div');
   div.id = id;
-  div.classList.add('col-md-4');
+  div.classList.add('job-pill');
 
   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 284c750d9f..ccc6b2b3cb 100644
--- a/apps/dashboard/app/views/projects/_job_details.html.erb
+++ b/apps/dashboard/app/views/projects/_job_details.html.erb
@@ -6,7 +6,7 @@
   data-job-cluster="<%= job.cluster %>"
   data-job-id="<%= job.id %>"
   data-job-status="<%= job.status.to_s %>"
-  class="col-md-4">
+  class="job-pill">
 
   <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 ac39ff326c..9b139d7085 100644
--- a/apps/dashboard/app/views/projects/_job_details_content.html.erb
+++ b/apps/dashboard/app/views/projects/_job_details_content.html.erb
@@ -4,12 +4,12 @@
 -%>
 
 <div>
-  <button class="badge <%= status_class(job.status.to_s) %> rounded-pill border-0 btn" type="button" data-bs-toggle="collapse" data-bs-target="#<%= id %>_data">
+  <button class="badge <%= status_class(job.status.to_s) %> rounded-pill border-0 btn collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= id %>_data">
     <span>
-      <%= job.id %> <%= status_text(job.status.to_s) %>
+      <%= job.id %> <%= status_text(job.status.to_s) unless job.status.to_s == 'completed' %>
     </span>
   </button>
-  <div class="collapse" id="<%= id %>_data">
+  <div class="collapse job-popup" 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 229c0654ad..5f0f7b8cf0 100644
--- a/apps/dashboard/app/views/projects/show.html.erb
+++ b/apps/dashboard/app/views/projects/show.html.erb
@@ -29,7 +29,7 @@
 </div>
 
 <div class="row mb-3">
-  <div class="col-md-2 mt-3">
+  <div class="col-sm-4 col-lg-2 mt-3">
     <div class="list-group bg-white rounded">
       <a class="list-group-item list-group-item-action bg-light font-weight-bold list-toggler"
           data-bs-toggle="collapse" data-bs-target="#launcher_list"
@@ -59,41 +59,43 @@
     <%= render partial: 'workflows/workflow', locals: { project: @project, workflows: @workflows } %>
   </div>
   
-  <div class="col-md-4">
-    <div class="border border-2 p-3 mt-3 mb-5 bg-white rounded">
-      <div class="row">
-        <h2 class="lead fw-bolder d-flex justify-content-center">Active Jobs</h2>
-        <%= render(partial: 'job_details', collection: @project.active_jobs, as: :job, locals: { project: @project }) %>
-      </div>
+  <div id="project-jobs-files-col" class="row col-sm-8 col-lg-10 d-flex">
+    <div id= "jobs-item" class="col-12 col-lg-5 jobs-files-item">
+      <div class="border border-2 p-3 mt-3 mb-5 bg-white rounded">
+        <div class="row pill-box">
+          <h2 class="lead fw-bolder d-flex justify-content-center">Active Jobs</h2>
+          <%= render(partial: 'job_details', collection: @project.active_jobs, as: :job, locals: { project: @project }) %>
+        </div>
 
-      <div class="row">
-        <h2 class="lead fw-bolder d-flex justify-content-center">Completed Jobs</h2>
-        <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, project: @project }) %>
+        <div class="row">
+          <h2 class="lead fw-bolder d-flex justify-content-center">Completed Jobs</h2>
+          <div id="completed_jobs" class="row pill-box">
+            <%- @project.completed_jobs.each do |job| -%>
+            <div class="job-pill" id="<%= "job_#{job.cluster}_#{job.id}" %>">
+              <%= render(partial: 'job_details_content', locals: { job: job, project: @project }) %>
+            </div>
+            <%- end -%>
           </div>
-          <%- end -%>
         </div>
       </div>
     </div>
-  </div>
-  <div class="col-md-6">
-    <div id="directory_browser" class="border border-2 p-3 mt-3 mb-5 bg-white rounded">
-      <h2 class="lead fw-bolder d-flex justify-content-center"><%= "#{t('dashboard.project')} #{t('dashboard.directory')}" %>: &nbsp<i><%= @project.id %></i></h2>
-      <hr>
-      <%= turbo_frame_tag 'project_directory', 
-            src: directory_frame_path(
-              files: @files,
-              path: @project&.directory
-           ) do
-      %>
-        <div class="d-flex justify-content-center">
-          <div id="loading-icon" class="spinner-border rem-5" role="status">
-            <span class="sr-only">Loading...</span> 
+    <div class="col-12 col-lg-7 jobs-files-item">
+      <div id="directory_browser" class="border border-2 p-3 mt-3 mb-5 bg-white rounded">
+        <h2 class="lead fw-bolder d-flex justify-content-center"><%= "#{t('dashboard.project')} #{t('dashboard.directory')}" %>: &nbsp<i><%= @project.id %></i></h2>
+        <hr>
+        <%= turbo_frame_tag 'project_directory', 
+              src: directory_frame_path(
+                files: @files,
+                path: @project&.directory
+            ) do
+        %>
+          <div class="d-flex justify-content-center">
+            <div id="loading-icon" class="spinner-border rem-5" role="status">
+              <span class="sr-only">Loading...</span> 
+            </div>
           </div>
-        </div>
-      <%- end -%>
+        <%- end -%>
+      </div>
     </div>
   </div>
 </div>

From cff51b7e90cb4931a23190e5ff1cfaf6ee010ca7 Mon Sep 17 00:00:00 2001
From: Braeden Singleton <bsingleton@osc.edu>
Date: Fri, 28 Nov 2025 19:08:15 -0500
Subject: [PATCH 2/4] use % instead of vw

---
 .../app/assets/stylesheets/projects.scss         | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/dashboard/app/assets/stylesheets/projects.scss b/apps/dashboard/app/assets/stylesheets/projects.scss
index 18a1f05a19..4157f990e4 100644
--- a/apps/dashboard/app/assets/stylesheets/projects.scss
+++ b/apps/dashboard/app/assets/stylesheets/projects.scss
@@ -107,22 +107,22 @@
 
   .job-popup {
     position: absolute;
-    left: calc(6vw - 7px);
-    width: 88.5vw;
+    left: 5.75%;
+    width: 88.5%; // 2*left + width should always = 100
 
     @media (min-width: 576px) {
-      left: calc(37vw - 8.5px);
-      width: 59.5vw;
+      left: 37%;
+      width: 59.5%;
     }
 
     @media (min-width: 992px) {
-      left: calc(19vw - 9px);
-      width: 30.5vw;
+      left: 18.5%;
+      width: 30.5%;
     }
 
     @media (min-width: 1600px) {
-      left: 18.5vw;
-      width: 30.5vw;
+      left: 18%;
+      width: 31.9%;
     }
   }
 }
\ No newline at end of file

From c0c580b7958df78da50400e6718bdbb76fa95506 Mon Sep 17 00:00:00 2001
From: Braeden Singleton <bsingleton@osc.edu>
Date: Thu, 4 Dec 2025 12:44:47 -0500
Subject: [PATCH 3/4] sub underscores for dashes in ids

---
 apps/dashboard/app/assets/stylesheets/projects.scss | 6 +++---
 apps/dashboard/app/views/projects/show.html.erb     | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/dashboard/app/assets/stylesheets/projects.scss b/apps/dashboard/app/assets/stylesheets/projects.scss
index 4157f990e4..a59e98536b 100644
--- a/apps/dashboard/app/assets/stylesheets/projects.scss
+++ b/apps/dashboard/app/assets/stylesheets/projects.scss
@@ -68,14 +68,14 @@
   text-wrap:nowrap;
 }
 
-#project-jobs-files-col {
+#project_jobs_files_col {
   padding-right: 0px;
 
   .jobs-files-item {
     padding-right: 0px;
   }
 
-  #jobs-item {
+  #jobs_item {
     @media (min-width: 992px) {
       padding-right: calc(var(--bs-gutter-x) * 0.5);
     }
@@ -125,4 +125,4 @@
       width: 31.9%;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/app/views/projects/show.html.erb b/apps/dashboard/app/views/projects/show.html.erb
index 5f0f7b8cf0..a7ed0aadf6 100644
--- a/apps/dashboard/app/views/projects/show.html.erb
+++ b/apps/dashboard/app/views/projects/show.html.erb
@@ -59,8 +59,8 @@
     <%= render partial: 'workflows/workflow', locals: { project: @project, workflows: @workflows } %>
   </div>
   
-  <div id="project-jobs-files-col" class="row col-sm-8 col-lg-10 d-flex">
-    <div id= "jobs-item" class="col-12 col-lg-5 jobs-files-item">
+  <div id="project_jobs_files_col" class="row col-sm-8 col-lg-10 d-flex">
+    <div id="jobs_item" class="col-12 col-lg-5 jobs-files-item">
       <div class="border border-2 p-3 mt-3 mb-5 bg-white rounded">
         <div class="row pill-box">
           <h2 class="lead fw-bolder d-flex justify-content-center">Active Jobs</h2>

From 496c977705f9ac36cd1b0f72fc8c6d84aa2f685b Mon Sep 17 00:00:00 2001
From: Braeden Singleton <bsingleton@osc.edu>
Date: Thu, 4 Dec 2025 14:44:42 -0500
Subject: [PATCH 4/4] add aria-live to jobs panel

---
 apps/dashboard/app/views/projects/show.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/app/views/projects/show.html.erb b/apps/dashboard/app/views/projects/show.html.erb
index a7ed0aadf6..8aca110253 100644
--- a/apps/dashboard/app/views/projects/show.html.erb
+++ b/apps/dashboard/app/views/projects/show.html.erb
@@ -60,7 +60,7 @@
   </div>
   
   <div id="project_jobs_files_col" class="row col-sm-8 col-lg-10 d-flex">
-    <div id="jobs_item" class="col-12 col-lg-5 jobs-files-item">
+    <div id="jobs_item" class="col-12 col-lg-5 jobs-files-item" aria-live="assertive">
       <div class="border border-2 p-3 mt-3 mb-5 bg-white rounded">
         <div class="row pill-box">
           <h2 class="lead fw-bolder d-flex justify-content-center">Active Jobs</h2>