Align the richtext help text height with the height of the textarea.

This works by setting the card to the same height as its containing flexbox. For perfect alignment, we need to make sure the extra margin at the bottom of the text-area stops applying when they are shown side by side.

diff --git a/app/views/shared/_richtext_field.html.erb b/app/views/shared/_richtext_field.html.erb
index 96b90c4adb0b571ce594f6faf647d21af93c81e6..168e9efe43cedc242a7900cae7759584385ad72c 100644 (file)
--- a/app/views/shared/_richtext_field.html.erb
+++ b/app/views/shared/_richtext_field.html.erb
@@ -1,12 +1,12 @@
 <div class="form-group">
   <label><%= object.class.human_attribute_name(attribute) %></label>
   <div id="<%= id %>_container" class="form-row richtext_container">
-    <div id="<%= id %>_content" class="col-sm-8 mb-3 richtext_content">
+    <div id="<%= id %>_content" class="col-sm-8 mb-3 mb-sm-0 richtext_content">
       <%= builder.text_area(attribute, options.merge(:wrapper => false, "data-preview-url" => preview_url(:type => type))) %>
       <div id="<%= id %>_preview" class="richtext_preview richtext text-break"></div>
     </div>
     <div id="<%= id %>_help" class="col-sm-4 richtext_help">
-      <div class="card bg-light">
+      <div class="card bg-light h-100">
         <div class="card-body">
           <%= render :partial => "shared/#{type}_help" %>
           <%= submit_tag t(".edit"), :id => "#{id}_doedit", :class => "richtext_doedit btn btn-primary", :disabled => true %>