From fb6816d59b68418e52b4fd6a7f9db97b1b6f7f59 Mon Sep 17 00:00:00 2001
From: Matthew Landauer <mlandauer@gmail.com>
Date: Wed, 20 Sep 2023 05:40:33 +0000
Subject: [PATCH] Stop the image from squashing at small screen sizes

---
 .../mailer/_reset_password_instructions_new_theme.html.erb   | 5 ++++-
 maizzle/src/templates/reset-password.html                    | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/views/devise/mailer/_reset_password_instructions_new_theme.html.erb b/app/views/devise/mailer/_reset_password_instructions_new_theme.html.erb
index 83af4a7d8..240895b0b 100644
--- a/app/views/devise/mailer/_reset_password_instructions_new_theme.html.erb
+++ b/app/views/devise/mailer/_reset_password_instructions_new_theme.html.erb
@@ -25,6 +25,9 @@
       text-decoration-line: underline !important
     }
     @media (max-width: 600px) { <%# erblint:disable PartialInstanceVariable %>
+      .sm-h-auto {
+        height: auto !important
+      }
       .sm-px-4 {
         padding-left: 16px !important;
         padding-right: 16px !important
@@ -113,7 +116,7 @@
             <div role="separator" style="line-height: 48px">&zwj;</div>
             <table style="width: 100%;" cellpadding="0" cellspacing="0" role="none">
               <tr>
-                <td align="right"> <img src="<%= image_url('tailwind/illustration/reset-password.png') %>" height="213" style="max-width: 100%; vertical-align: middle; line-height: 1; border: 0" alt="">
+                <td align="right"> <img src="<%= image_url('tailwind/illustration/reset-password.png') %>" height="213" class="sm-h-auto" style="max-width: 100%; vertical-align: middle; line-height: 1; border: 0" alt="">
                 </td>
               </tr>
             </table>
diff --git a/maizzle/src/templates/reset-password.html b/maizzle/src/templates/reset-password.html
index 9811e3010..72bc0932a 100644
--- a/maizzle/src/templates/reset-password.html
+++ b/maizzle/src/templates/reset-password.html
@@ -30,10 +30,10 @@
     <tr>
       <td align="right">
         <if condition="page.env === 'local'">
-          <img src="images/reset-password-illustration.png" height="213">
+          <img src="images/reset-password-illustration.png" height="213" class="sm:h-auto">
         </if>
         <else>
-          <img src="<%= image_url('tailwind/illustration/reset-password.png') %>" height="213">
+          <img src="<%= image_url('tailwind/illustration/reset-password.png') %>" height="213" class="sm:h-auto">
         </else>
       </td>
     </tr>