From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 13 Jan 2021 10:12:15 +0000 (+0000)
Subject: Align the richtext help text height with the height of the textarea.
X-Git-Tag: live~2318^2~1
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/ed07e17ca2e7fdd41d876e02c3bad213af84eef5

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 96b90c4ad..168e9efe4 100644
--- 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 %>