Styling

client/coral-admin/src/components/KarmaTooltip.css

@@ -1,7 +1,7 @@
 .karmaTooltip {
   position: relative;
   display: inline-block;
-  margin: 0 4px;
+  margin: 2px 4px 0;
 }
 
 .icon {
@@ -13,6 +13,10 @@
   -webkit-touch-callout:none;
   user-select: none;
   -webkit-tap-highlight-color:rgba(0,0,0,0);
+
+  > i {
+    vertical-align: baseline;
+  }
 }
 
 .icon:hover {

client/coral-admin/src/components/UserDetail.css

@@ -35,6 +35,10 @@
   margin-right: 20px;
 }
 
+.karmaStat {
+  display: flex;
+}
+
 .stat:last-child {
   margin-right: 0px;
 }
@@ -47,20 +51,22 @@
   font-size: 0.9em;
   line-height: normal;
   letter-spacing: 0.4px;
-  min-width: 35px;
-  display: inline-block;
+  min-width: 25px;
+  display: block;
 }
 
 .statResult {
   font-size: 1.5em;
   padding: 5px 0;
   display: inline-block;
+  text-align: center; 
 }
 
 .statReportResult, .statKarmaResult {
   color: white;
   margin: 5px 0;
   font-weight: 400;
+  text-align: center;
 }
 
 .statReportResult.reliable, .statKarmaResult.good {

client/coral-admin/src/components/UserDetail.js

@@ -205,29 +205,23 @@ class UserDetail extends React.Component {
 
             <ul className={styles.stats}>
               <li className={styles.stat}>
-                <div>
-                  <span className={styles.statItem}>
-                    {t('user_detail.total_comments')}
-                  </span>
-                </div>
+                <span className={styles.statItem}>
+                  {t('user_detail.total_comments')}
+                </span>
                 <span className={styles.statResult}>{totalComments}</span>
               </li>
               <li className={styles.stat}>
-                <div>
-                  <span className={styles.statItem}>
-                    {t('user_detail.reject_rate')}
-                  </span>
-                </div>
+                <span className={styles.statItem}>
+                  {t('user_detail.reject_rate')}
+                </span>
                 <span className={styles.statResult}>
                   {rejectedPercent.toFixed(1)}%
                 </span>
               </li>
               <li className={styles.stat}>
-                <div>
-                  <span className={styles.statItem}>
-                    {t('user_detail.reports')}
-                  </span>
-                </div>
+                <span className={styles.statItem}>
+                  {t('user_detail.reports')}
+                </span>
                 <span
                   className={cn(
                     styles.statReportResult,
@@ -237,21 +231,21 @@ class UserDetail extends React.Component {
                   {capitalize(getReliability(user.reliable.flagger))}
                 </span>
               </li>
-              <li className={styles.stat}>
+              <li className={cn(styles.stat, styles.karmaStat)}>
                 <div>
                   <span className={styles.statItem}>
                     {t('user_detail.karma')}
                   </span>
-                  <KarmaTooltip />
+                  <span
+                    className={cn(
+                      styles.statKarmaResult,
+                      styles[getKarma(user.reliable.commenter)]
+                    )}
+                  >
+                    {user.reliable.commenterScore}
+                  </span>
                 </div>
-                <span
-                  className={cn(
-                    styles.statKarmaResult,
-                    styles[getKarma(user.reliable.commenter)]
-                  )}
-                >
-                  {user.reliable.commenterScore}
-                </span>
+                <KarmaTooltip />
               </li>
             </ul>
           </div>