pinafore/routes/_components/compose/ComposeAuthor.html

<a href="/accounts/{{verifyCredentials.id}}"
   class="compose-box-avatar">
  <Avatar account="{{verifyCredentials}}" size="small"/>
</a>
<a class="compose-box-display-name" href="/accounts/{{verifyCredentials.id}}">
  {{verifyCredentials.display_name || verifyCredentials.acct}}
</a>
<span class="compose-box-handle">
  {{'@' + verifyCredentials.acct}}
</span>
<style>
  .compose-box-avatar {
    grid-area: avatar;
    margin-right: 15px;
  }
  .compose-box-display-name {
    color: var(--deemphasized-text-color);
    grid-area: name;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.1em;
    margin-left: 5px;
    font-weight: 600;
  }
  .compose-box-display-name,
  .compose-box-display-name:hover,
  .compose-box-display-name:visited {
    color: var(--body-text-color);
  }
  :global(.compose-box-handle) {
    grid-area: handle;
    color: var(--deemphasized-text-color);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.1em;
    margin-left: 5px;
  }

  @media (max-width: 767px) {
    .compose-box-avatar {
      grid-area: avatar;
      margin-right: 5px;
    }
  }
</style>
<script>
  import Avatar from '../Avatar.html'
  import { store } from '../../_store/store'
  export default {
    components: {
      Avatar
    },
    store: () => store,
    computed: {
      verifyCredentials: ($currentVerifyCredentials) => $currentVerifyCredentials
    }
  }
</script>