Add .clear class to override left float on buttons

.crm-button has a float: left, which was added in #18880, and can in some themes cause the subsequent lines to flow back inline. This fixes that (and adds a little padding under the buttons).

diff --git a/templates/CRM/common/SocialNetwork.tpl b/templates/CRM/common/SocialNetwork.tpl
index 374123bdfba466c30702a46d7335ead67e89d105..57f91076de10c9b59407ec3b5af96faca923ecb1 100644 (file)
--- a/templates/CRM/common/SocialNetwork.tpl
+++ b/templates/CRM/common/SocialNetwork.tpl
@@ -17,18 +17,16 @@
         <a href="https://facebook.com/sharer/sharer.php?u={$url|escape:'url'}" target="_blank" class="btn btn-default" role="button">{ts}Share on Facebook{/ts}</a>
         <a href="ttps://www.linkedin.com/shareArticle?mini=true&amp;url={$url|escape:'url'}&amp;title={$title}" target="_blank" rel="noopener" class="btn btn-default">{ts}Share on LinkedIn{/ts}</a>
     {else}
-       <button onclick="window.open('https://twitter.com/intent/tweet?url={$url|escape:'url'}&amp;text={$title}','_blank')" type="button" class="btn btn-default crm-button" id="crm-tw"><i aria-hidden="true" class="crm-i fa-twitter"></i>&nbsp;&nbsp;{ts}Tweet{/ts}</button>
+        <button onclick="window.open('https://twitter.com/intent/tweet?url={$url|escape:'url'}&amp;text={$title}','_blank')" type="button" class="btn btn-default crm-button" id="crm-tw"><i aria-hidden="true" class="crm-i fa-twitter"></i>&nbsp;&nbsp;{ts}Tweet{/ts}</button>
         <button onclick="window.open('https://facebook.com/sharer/sharer.php?u={$url|escape:'url'}','_blank')" type="button" class="btn btn-default crm-button" role="button" id="crm-fb"><i aria-hidden="true" class="crm-i fa-facebook"></i>&nbsp;&nbsp;{ts}Share on Facebook{/ts}</button>
         <button onclick="window.open('https://www.linkedin.com/shareArticle?mini=true&amp;url={$url|escape:'url'}&amp;title={$title}','_blank')" type="button" rel="noopener" class="btn btn-default crm-button" id="crm-li"><i aria-hidden="true" class="crm-i fa-linkedin"></i>&nbsp;&nbsp;{ts}Share on LinkedIn{/ts}</button>
         <button onclick="window.open('mailto:?subject={$title}&amp;body={$url|escape:'url'}','_self')" type="button" rel="noopener" class="btn btn-default crm-button" id="crm-email"><i aria-hidden="true" class="crm-i fa-envelope"></i>&nbsp;&nbsp;{ts}Email{/ts}</button>
-        {/if}
+    {/if}
     {if $pageURL}
-       {if $emailMode neq true}
-        <br/>
-               {/if}
-    <br/>
-    <p><strong>{ts}You can also share the below link in an email or on your website:{/ts}</strong><br />
+    <p class="clear">
+    <br/><strong>{ts}You can also share the below link in an email or on your website:{/ts}</strong><br />
     <a href="{$pageURL}">{$pageURL}</a></p>
     {else}
+    <div class="clear"></div>
     {/if}
 </div>