chore: Fix the sample name column when horizontal scrolling

phac-nml · Jan 12, 2024 · d4d11ea · d4d11ea
1 parent 8ce6de9
commit d4d11ea
Showing 1 changed file with 14 additions and 19 deletions.
diff --git a/app/views/projects/samples/_table.html.erb b/app/views/projects/samples/_table.html.erb
@@ -7,10 +7,7 @@
 >
     <thead class="text-xs text-slate-700 uppercase bg-slate-50 dark:bg-slate-700 dark:text-slate-400">
     <tr>
-      <% if allowed_to?(:transfer_sample?, project) %>
-      <th aria-hidden="true"></th>
-      <% end %>
-      <th scope="col" class="px-6 py-3"><%= t(".sample") %></th>
+      <th scope="col" class="px-6 py-3 sticky left-0 bg-slate-50 dark:bg-slate-700"><%= t(".sample") %></th>
       <th scope="col" class="px-6 py-3"><%= t(".created_at") %></th>
       <th scope="col" class="px-6 py-3"><%= t(".updated_at") %></th>
       <% @template.each do |column| %>
@@ -35,22 +32,20 @@
         id="<%= sample.id %>"
         class="bg-white border-b dark:bg-slate-800 dark:border-slate-700"
       >
-        <% if allowed_to?(:transfer_sample?, project) %>
-          <td class="w-10 ps-4">
+        <td class="px-6 py-3 whitespace-nowrap sticky left-0 bg-white dark:bg-slate-800">
+          <% if allowed_to?(:transfer_sample?, project) %>
             <%= check_box_tag "sample_ids[]",
-            sample.id,
-            nil,
-            id: dom_id(sample),
-            "aria-label": sample.name,
-            data: {
-              action: "input->selection#toggle",
-              selection_target: "rowSelection"
-            },
-            class:
-              "w-4 h-4 text-primary-600 bg-slate-100 border-slate-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-slate-800 focus:ring-2 dark:bg-slate-700 dark:border-slate-600" %>
-          </td>
-        <% end %>
-        <td class="px-6 py-3 whitespace-nowrap">
+                              sample.id,
+                              nil,
+                              id: dom_id(sample),
+                              "aria-label": sample.name,
+                              data: {
+                                action: "input->selection#toggle",
+                                selection_target: "rowSelection"
+                              },
+                              class:
+                                "w-4 h-4 mr-2.5 text-primary-600 bg-slate-100 border-slate-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-slate-800 focus:ring-2 dark:bg-slate-700 dark:border-slate-600" %>
+          <% end %>
           <%= link_to sample.name,
           namespace_project_sample_path(id: sample.id),
           data: {