pinafore/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>