Merge branch 'fix-in-product-marketing-layout' into 'master'

Fix style issues with in product marketing emails

See merge request gitlab-org/gitlab!53359

app/helpers/in_product_marketing_helper.rb

@@ -27,11 +27,11 @@ module InProductMarketingHelper
   end
 
   def in_product_marketing_logo(track, series)
-    inline_image_link('mailers/in_product_marketing', "#{track}-#{series}.png", width: '150')
+    inline_image_link('mailers/in_product_marketing', "#{track}-#{series}.png", { width: '150', style: 'width: 150px;' })
   end
 
   def about_link(folder, image, width)
-    link_to inline_image_link(folder, image, { width: width, alt: s_('InProductMarketing|go to about.gitlab.com') }), 'https://about.gitlab.com/'
+    link_to inline_image_link(folder, image, { width: width, style: "width: #{width}px;", alt: s_('InProductMarketing|go to about.gitlab.com') }), 'https://about.gitlab.com/'
   end
 
   def in_product_marketing_tagline(track, series)
@@ -344,7 +344,7 @@ module InProductMarketingHelper
   end
 
   def inline_image_link(folder, image, **options)
-    attachments[image] = File.read(Rails.root.join("app/assets/images", folder, image))
+    attachments.inline[image] = File.read(Rails.root.join("app/assets/images", folder, image))
     image_tag attachments[image].url, **options
   end
 end

app/views/notify/in_product_marketing_email.html.haml

@@ -162,7 +162,7 @@
                 #main-story.mktEditable{ mktoname: "main-story" }
                   %table{ border: "0", cellpadding: "0", cellspacing: "0", role: "presentation", width: "100%" }
                     %tr
-                      %td{ align: "left", style: "padding: 0px;" }
+                      %td{ align: "left", style: "padding: 0 20px;" }
                         = about_link('mailers/in_product_marketing', 'gitlab-logo-gray-rgb.png', 200)
                     %tr
                       %td{ "aria-hidden" => "true", height: "30", style: "font-size: 0; line-height: 0;" }
@@ -187,7 +187,7 @@
                         %p
                           = in_product_marketing_progress(@track, @series)
                     %tr{ style: "background-color: #ffffff;" }
-                      %td{ align: "center", style: "padding:50px 20px 0 20px;" }
+                      %td{ align: "center", style: "padding:75px 20px 25px;" }
                         = about_link('', 'gitlab_logo.png', 80)
                     %tr{ style: "background-color: #ffffff;" }
                       %td{ align: "center", style: "padding:0px ;" }