semaphore/routes/_components/status/StatusAuthorName.html

<a class="status-author-name {{isStatusInNotification ? 'status-in-notification' : '' }} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}"
   href="/accounts/{{originalAccountId}}"
   title="{{'@' + originalAccount.acct}}"
   focus-key={{focusKey}}
>
  {{originalAccount.display_name || originalAccount.username}}
</a>
<style>
  .status-author-name {
    grid-area: author-name;
    align-self: center;
    margin-left: 5px;
    font-size: 1.1em;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .status-author-name.status-in-own-thread {
    font-size: 1.3em;
  }

  .status-author-name, .status-author-name:hover, .status-author-name:visited {
    color: var(--body-text-color);
  }

  .status-author-name.status-in-notification,
  .status-author-name.status-in-notification:hover,
  .status-author-name.status-in-notification:visited {
    color: var(--very-deemphasized-text-color);
  }

</style>
<script>
  export default {
    computed: {
      focusKey: (uuid) => `status-author-name-${uuid}`
    }
  }
</script>