From b5649a6ea8ae34065890f92fc9870e2de40497a9 Mon Sep 17 00:00:00 2001
From: Charlotte Van Petegem <charlotte@vanpetegem.be>
Date: Sat, 24 May 2025 11:00:45 +0200
Subject: [PATCH] Constrain width and height of image answer previews

---
 app/assets/stylesheets/application.postcss.css | 11 +++++++++++
 app/views/questions/_image_form.html.erb       |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/application.postcss.css b/app/assets/stylesheets/application.postcss.css
index 02a6319..764a6aa 100644
--- a/app/assets/stylesheets/application.postcss.css
+++ b/app/assets/stylesheets/application.postcss.css
@@ -79,6 +79,17 @@ header {
     }
 }
 
+.answer-kind-image {
+    .answer-kind-image-container {
+        text-align: center;
+
+        img {
+            max-width: 100%;
+            max-height: 50vh;
+        }
+    }
+}
+
 .login-intro {
     background-color: white;
     padding: 1rem;
diff --git a/app/views/questions/_image_form.html.erb b/app/views/questions/_image_form.html.erb
index 6870968..166b489 100644
--- a/app/views/questions/_image_form.html.erb
+++ b/app/views/questions/_image_form.html.erb
@@ -1,4 +1,4 @@
-<div id="<%= "question_answer_#{question.id}_preview" %>">
+<div class="answer-kind-image-container" id="<%= "question_answer_#{question.id}_preview" %>">
     <% if question.answer.present? %>
         <%= image_tag question.answer.image %>
     <% end %>