style titlebar subtitle

Author: AndyLnd

src/page/template/content/conversation/title-bar.htm

@@ -13,15 +13,17 @@
          data-placement="bottom"
          data-uie-name="do-participants"
          class="conversation-title-bar-name">
-      <!-- ko if: conversationEntity().hasLegalHold() -->
-        <legal-hold-dot style="margin: 0 16px 0 0" params="legalHoldModal: contentViewModel.legalHoldModal, conversation: conversationEntity" data-uie-name="status-legal-hold-conversation"></legal-hold-dot>
-      <!-- /ko -->
-      <!-- ko if: conversationEntity().verification_state() === ConversationVerificationState.VERIFIED -->
-        <verified-icon class="conversation-title-bar-name--verified"></verified-icon>
-      <!-- /ko -->
-      <span class="conversation-title-bar-name-label" data-bind="text: conversationEntity().display_name()" data-uie-name="status-conversation-title-bar-label"></span>
+         <div class="conversation-title-bar-name-label--wrapper">
+        <!-- ko if: conversationEntity().hasLegalHold() -->
+          <legal-hold-dot style="margin: 0 16px 0 0" params="legalHoldModal: contentViewModel.legalHoldModal, conversation: conversationEntity" data-uie-name="status-legal-hold-conversation"></legal-hold-dot>
+        <!-- /ko -->
+        <!-- ko if: conversationEntity().verification_state() === ConversationVerificationState.VERIFIED -->
+          <verified-icon class="conversation-title-bar-name--verified"></verified-icon>
+        <!-- /ko -->
+        <span class="conversation-title-bar-name-label" data-bind="text: conversationEntity().display_name()" data-uie-name="status-conversation-title-bar-label"></span>
+      </div>
       <!-- ko if: conversationSubtitle() -->
-        <span data-bind="text: conversationSubtitle()"></span>
+        <div class="conversation-title-bar-name--subtitle" data-bind="text: conversationSubtitle()"></div>
       <!-- /ko -->
     </div>
 

src/style/content/conversation/title-bar.less

@@ -32,6 +32,7 @@
 
   display: flex;
   height: 100%;
+  flex-direction: column;
   flex-grow: 1;
   cursor: pointer;
   user-select: none;
@@ -95,4 +96,13 @@
   .label-bold-xs;
   overflow: hidden;
   text-overflow: ellipsis;
+  &--wrapper {
+    .flex-center;
+    display: flex;
+  }
+}
+
+.conversation-title-bar-name--subtitle {
+  .font-size-xs;
+  color: var(--background-fade-40);
 }