From 2b7f7c162564392c6aee1960c41ce4a4a1261a4d Mon Sep 17 00:00:00 2001
From: Jonas Herzig <me@johni0702.de>
Date: Mon, 24 Sep 2018 13:20:57 +0200
Subject: [PATCH] Properly align user name and talking indicator

---
 app/index.html                    | 9 +++++----
 themes/MetroMumbleLight/main.scss | 5 +++++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/index.html b/app/index.html
index f4b1d2f..1ed87e3 100644
--- a/app/index.html
+++ b/app/index.html
@@ -304,14 +304,15 @@
             <div data-bind="if: comment">
               <div class="user-comment tooltip" data-bind="html: comment"></div>
             </div>
-            <img class="user-talk-off" data-bind="visible: talking() == 'off'"
+            <img class="user-talk user-talk-off" data-bind="visible: talking() == 'off'"
                 alt="talk off" src="/svg/talking_off.svg">
-            <img class="user-talk-on" data-bind="visible: talking() == 'on'"
+            <img class="user-talk user-talk-on" data-bind="visible: talking() == 'on'"
                 alt="talk on" src="/svg/talking_on.svg">
-            <img class="user-talk-whisper" data-bind="visible: talking() == 'whisper'"
+            <img class="user-talk user-talk-whisper" data-bind="visible: talking() == 'whisper'"
                 alt="whisper" src="/svg/talking_whisper.svg">
-            <img class="user-talk-shout" data-bind="visible: talking() == 'shout'"
+            <img class="user-talk user-talk-shout" data-bind="visible: talking() == 'shout'"
                 alt="shout" src="/svg/talking_alt.svg">
+            <!-- /ko -->
             <div class="user-name" data-bind="text: name"></div>
           </div>
         </div>
diff --git a/themes/MetroMumbleLight/main.scss b/themes/MetroMumbleLight/main.scss
index 4c162b6..f29bbbc 100644
--- a/themes/MetroMumbleLight/main.scss
+++ b/themes/MetroMumbleLight/main.scss
@@ -144,11 +144,15 @@ html, body {
 .user {
   margin-left: 9px;
 }
+.user-talk {
+  vertical-align: middle;
+}
 .user-status, .channel-status {
   float: right;
 }
 .user,.channel{
   height: 23px;
+  line-height: 23px;
   padding: 2px;
   border: 1px solid transparent;
 }
@@ -461,6 +465,7 @@ form {
   padding-bottom: 0px;
   border: none;
   height: 19px;
+  line-height: 19px;
 }
 .minimal .user-status {
   height: 19px;