Fix overlapping text in markdown help

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 049dadbff8cf5abb73a2baa247a46eae5e2c69ed..0a23207d55ab0972abe09c6fa4c2e4a544cef1f4 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1642,12 +1642,9 @@ a.button.submit {
 /* Rules for rich text editors */
 
 .richtext_container {
-  white-space: nowrap;
-
   .richtext_content {
     display: inline-block;
     vertical-align: top;
-    white-space: normal;
 
     .richtext_preview {
       display: inline-block;
@@ -1673,7 +1670,7 @@ a.button.submit {
     margin-left: 15px;
     background-color: #f8f8ff;
     padding: 10px;
-    width: 200px;
+    max-width: 450px;
 
     ul {
       margin-bottom: 0;
@@ -1685,20 +1682,22 @@ a.button.submit {
       padding-bottom: 5px;
     }
 
-    li h4, li span {
-      display: block;
+    li h4, li span, li p {
+      display: inline-block;
+      vertical-align: top;
       font-size: 11px;
     }
 
     li h4 {
+      width: 35%;
       margin: 0;
-      float: left;
     }
 
-    li span {
-      float: right;
-      width: 50%;
+    li span, li p {
+      width: 60%;
       margin-left: 10px;
+      margin-bottom: 5px;
+      white-space: nowrap;
     }
 
     input.richtext_doedit,

diff --git a/app/views/site/_markdown_help.html.erb b/app/views/site/_markdown_help.html.erb
index 07035477e78d9e72b9aa5c56cd0a8dad9dcaac9d..0d7fa335440031d8c62ac723391af6193271afd5 100644 (file)
--- a/app/views/site/_markdown_help.html.erb
+++ b/app/views/site/_markdown_help.html.erb
@@ -1,25 +1,25 @@
 <h4 class='heading'><%= t "site.markdown_help.title_html" %></h4>
 <ul>
-  <li class='clearfix'>
+  <li>
     <h4><%= t "site.markdown_help.headings" %></h4>
-    <span># <%= t "site.markdown_help.heading" %></span>
-    <span>## <%= t "site.markdown_help.subheading" %></span>
+    <p># <%= t "site.markdown_help.heading" %></br>
+       ## <%= t "site.markdown_help.subheading" %></p>
   </li>
-  <li class='clearfix'>
+  <li>
     <h4><%= t "site.markdown_help.unordered" %></h4>
-    <span>* <%= t "site.markdown_help.first" %></span>
-    <span>* <%= t "site.markdown_help.second" %></span>
+    <p>* <%= t "site.markdown_help.first" %></br>
+       * <%= t "site.markdown_help.second" %></p>
   </li>
-  <li class='clearfix'>
+  <li>
     <h4><%= t "site.markdown_help.ordered" %></h4>
-    <span>1. <%= t "site.markdown_help.first" %></span>
-    <span>2. <%= t "site.markdown_help.second" %></span>
+    <p>1. <%= t "site.markdown_help.first" %><br>
+       2. <%= t "site.markdown_help.second" %></p>
   </li>
-  <li class='clearfix'>
+  <li>
     <h4><%= t "site.markdown_help.link" %></h4>
     <span>[<%= t "site.markdown_help.text" %>](<%= t "site.markdown_help.url" %>)</span>
   </li>
-  <li class='clearfix'>
+  <li>
     <h4><%= t "site.markdown_help.image" %></h4>
     <span>![<%= t "site.markdown_help.alt" %>](<%= t "site.markdown_help.url" %>)</span>
   </li>