Refactor Added content-visibility: auto; to rows so that they are onl…

…y rendered when within the viewport (#894)
phac-nml · Jan 10, 2025 · d11b67d · d11b67d
1 parent a01a678
commit d11b67d
Showing 1 changed file with 16 additions and 23 deletions.
diff --git a/app/components/nextflow/samplesheet/column_component.html.erb b/app/components/nextflow/samplesheet/column_component.html.erb
@@ -1,17 +1,10 @@
 <div
-  class="
-    table-column
-    flex-grow
-    text-left
-    whitespace-nowrap
-    bg-slate-50
-    text-sm
-    text-slate-500
-    dark:text-white
-  "
+  class="table-column flex-grow text-sm text-left  whitespace-nowrap bg-slate-50 text-slate-500 dark:text-white"
 >
   <% if property["cell_type"] == "metadata_cell" %>
-    <div class="table-header dark:border-slate-600 border border-slate-100 sticky top-0 dark:bg-slate-700 bg-slate-50  z-10">
+    <div
+      class="sticky top-0 z-10 border  table-header dark:border-slate-600 border-slate-100 dark:bg-slate-700 bg-slate-50"
+    >
       <%= form_with url: fields_workflow_executions_metadata_path do |f| %>
         <%= f.hidden_field :format, value: "turbo_stream", id: "field_#{header}_turbo" %>
         <%= f.hidden_field :namespace_id, value: namespace_id, id: "namespace_#{header}" %>
@@ -34,35 +27,35 @@
                    "aria-label": header,
                    class:
                      "bg-slate-50 text-slate-900 text-sm border-none focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-slate-700 dark:placeholder-slate-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 font-semibold tracking-wider uppercase",
-                   onchange: "Turbo.navigator.submitForm(this.form)"
+                   onchange: "Turbo.navigator.submitForm(this.form)",
                  } %>
       <% end %>
     </div>
   <% else %>
     <div
       class="
-        table-header
-        p-2.5
-        font-semibold
-        tracking-wider
-        dark:border-slate-600
-        border
-        border-slate-100 sticky top-0
-        dark:bg-slate-700 bg-slate-50 z-10
+        table-header p-2.5 font-semibold tracking-wider dark:border-slate-600 border
+        border-slate-100 sticky top-0 dark:bg-slate-700 bg-slate-50 z-10
       "
     >
       <div class="flex items-center space-x-2 uppercase">
         <%= header %>
         <% if @required %>
-          <span class="text-red-600 dark:text-red-300 ml-1">(<%= t(".required") %>)</span>
+          <span class="ml-1 text-red-600 dark:text-red-300">(<%= t(".required") %>)</span>
         <% end %>
       </div>
     </div>
   <% end %>
 
-  <div id="<%= "metadata-#{header}-column" %>" class="dark:bg-slate-700 bg-slate-50">
+  <div
+    id="<%= "metadata-#{header}-column" %>"
+    class="dark:bg-slate-700 bg-slate-50"
+  >
     <% samples.each_with_index do |sample, index| %>
-      <div class="table-td dark:border-slate-600 border border-slate-100">
+      <div
+        style="content-visibility: auto;"
+        class="border table-td dark:border-slate-600 border-slate-100"
+      >
         <%= fields_for "workflow_execution[samples_workflow_executions_attributes][#{index}]" do |s| %>
           <% if property["cell_type"] == "sample_cell" %>
             <%= s.hidden_field :sample_id, value: sample.id %>