Eliminate layout shift when viewing submission files

Give hints about dimensions so that the browser can immediatly do proper layout
Earlopain · Oct 3, 2023 · 472b14b · 472b14b
1 parent 355af0b
commit 472b14b
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/app/stylesheet/specific/submission_files.scss b/app/stylesheet/specific/submission_files.scss
@@ -9,6 +9,8 @@
     .submission-file {
       max-width: 100%;
       max-height: 250px;
+      object-fit: contain;
+      object-position: bottom;
     }
 
     .selected {

diff --git a/app/views/submission_files/_sample.html.erb b/app/views/submission_files/_sample.html.erb
@@ -3,7 +3,7 @@
   <% if submission_file.sample_generated? %>
     <div class="file-container">
       <% if submission_file.sample.content_type.in? %w[image/jpeg image/gif] %>
-        <%= image_tag url_for(submission_file.sample), loading: "lazy", class: "submission-file" %>
+        <%= image_tag url_for(submission_file.sample), loading: "lazy", class: "submission-file", width: submission_file.width, height: submission_file.height %>
         <%= original_file_tag(submission_file) %>
       <% else %>
         Unhandled content_type <%= submission_file.sample.content_type %>