Rework all section headers to deal with mobile wrapping

dashboard/public/views/user-settings.html

@@ -230,11 +230,7 @@
 
 <div class="content content-large">
 
-  <div class="text-left">
-    <h1>
-      {{ 'users.title' | tr }}
-    </h1>
-  </div>
+  <h1 class="section-header">{{ 'users.title' | tr }}</h1>
 
   <div class="card card-large">
     <form name="profileConfigForm" role="form" novalidate ng-submit="profileConfig.submit()" autocomplete="off">
@@ -266,23 +262,21 @@
 
   </div>
 
-  <div class="text-left section-header">
-    <h3>
-      {{ 'users.externalLdap.title' | tr }}
-      <div class="btn-group btn-group-sm pull-right">
-        <button type="button" class="btn btn-small btn-default dropdown-toggle" ng-show="externalLdap.tasks.length" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" uib-tooltip="{{ 'domains.renewCerts.showLogsAction' | tr }}">
-          <i class="fas fa-align-left"></i> <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu">
-          <li ng-repeat="task in externalLdap.tasks">
-            <a ng-href="/logs.html?taskId={{task.id}}" target="_blank" class="text-right">
-            {{ task.ts | prettyLongDate }} <i class="fa" style="margin-left: 20px" ng-class="{ 'status-active fa-check-circle': !task.active && task.success, 'fa-circle-notch fa-spin': task.active, 'status-error fa-times-circle': !task.active && !task.success }"></i>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </h3>
-  </div>
+  <h3 class="section-header">
+    {{ 'users.externalLdap.title' | tr }}
+    <div class="btn-group btn-group-sm pull-right">
+      <button type="button" class="btn btn-small btn-default dropdown-toggle" ng-show="externalLdap.tasks.length" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" uib-tooltip="{{ 'domains.renewCerts.showLogsAction' | tr }}">
+        <i class="fas fa-align-left"></i> <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu">
+        <li ng-repeat="task in externalLdap.tasks">
+          <a ng-href="/logs.html?taskId={{task.id}}" target="_blank" class="text-right">
+          {{ task.ts | prettyLongDate }} <i class="fa" style="margin-left: 20px" ng-class="{ 'status-active fa-check-circle': !task.active && task.success, 'fa-circle-notch fa-spin': task.active, 'status-error fa-times-circle': !task.active && !task.success }"></i>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </h3>
 
   <div class="card card-large">
     <div class="row">
@@ -427,9 +421,7 @@
     </div>
   </div>
 
-  <div class="text-left section-header">
-    <h3>{{ 'users.exposedLdap.title' | tr }}</h3>
-  </div>
+  <h3 class="section-header">{{ 'users.exposedLdap.title' | tr }}</h3>
 
   <div class="card card-large">
     <div class="row">
@@ -483,9 +475,7 @@
     </div>
   </div>
 
-  <div class="text-left section-header">
-    <h3>{{ 'oidc.title' | tr }}</h3>
-  </div>
+  <h3 class="section-header">{{ 'oidc.title' | tr }}</h3>
 
   <div class="card card-large">
     <div class="grid-item-top">