Stop the image from squashing at small screen sizes

openaustralia · Sep 20, 2023 · fb6816d · fb6816d
1 parent a4f83a0
commit fb6816d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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
@@ -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>