ffeature: circle's name displayed

src/page-circle-chat.pug

@@ -1,9 +1,14 @@
-.content-box.with-padding.full-width.chat-view
-  sib-chat(
-    data-authentication='login',
-    data-auto-login='true',
-    data-bosh-service-url=`${xmpp}`,
-    data-debug='false',
-    data-locales-url='en',
+.content-box.full-width
+  sib-display.chat-header(
     bind-resources
-  )
+    fields='name'
+  )
+  .chat-view
+    sib-chat(
+      data-authentication='login',
+      data-auto-login='true',
+      data-bosh-service-url=`${xmpp}`,
+      data-debug='false',
+      data-locales-url='en',
+      bind-resources
+    )

src/styles/components/chat.scss

@@ -1,9 +1,23 @@
 
 // chat
+.chat-header {
+  
+  div {
+    color: $color-233-18-29;
+    display: flex;
+    flex-direction: column;
+    margin: 3rem;
+    
+    &>:first-child {
+      font-size: 2rem;
+      font-weight: bold;
+    }
+  }
+}
 
 .chat-view {
   padding: 0;
-  height: calc(100vh - 84px);
+  height: calc(100vh - 84px - 83px);
   position: relative;
   overflow: hidden;
 
@@ -13,7 +27,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    max-height: calc(100vh - 84px);
+    max-height: calc(100vh - 84px - 83px);
     z-index: 0;
   }
 }