diff --git a/assets/scss/asciidoctor.scss b/assets/scss/asciidoctor.scss
index 85ec9a7..2d7e940 100644
--- a/assets/scss/asciidoctor.scss
+++ b/assets/scss/asciidoctor.scss
@@ -241,6 +241,7 @@ p {
     gap: 1em;
     padding: 0.5em;
     max-width: 55ch;
+    width: fit-content;
   }
 
   &__avatar {
@@ -262,7 +263,6 @@ p {
 
   &__text {
     display: block;
-    max-width: 50ch;
     margin: 0;
 
     > :first-child {
@@ -270,6 +270,10 @@ p {
     }
   }
 
+  &__avatar-name {
+    font-weight: bolder;
+  }
+
   // Roles/modifiers.
   &.reversed {
     flex-direction: row-reverse;
diff --git a/gems/lib/asciidoctor/chat-block-processor/extension.rb b/gems/lib/asciidoctor/chat-block-processor/extension.rb
index 52ec823..cfa3f4f 100644
--- a/gems/lib/asciidoctor/chat-block-processor/extension.rb
+++ b/gems/lib/asciidoctor/chat-block-processor/extension.rb
@@ -18,7 +18,7 @@ class ChatBlock < Asciidoctor::Extensions::BlockProcessor
     attrs['name'] ||= attrs['avatar']
 
     block << (create_html_fragment block, %(
-      <div class="dialogblock dialogblock__box dialogblock__avatar--#{attrs['avatar']} #{attrs['role']}" title="#{attrs['avatar']}">
+      <div role="figure" class="dialogblock dialogblock__box dialogblock__avatar--#{attrs['avatar']} #{attrs['role']}" title="#{attrs['avatar']}">
         <div class="dialogblock dialogblock__avatar">
     ))
 
@@ -35,6 +35,7 @@ class ChatBlock < Asciidoctor::Extensions::BlockProcessor
     block << (create_html_fragment block, %(
         </div>
         <div class="dialogblock dialogblock__text">
+          <small class="dialogblock dialogblock__avatar-name">#{attrs['name']}</small>
     ))
 
     parse_content block, reader