pinafore/src/routes/_components/status/StatusSidebar.html

<a id={elementId}
   class="status-sidebar size-{size}"
   rel="prefetch"
   href="/accounts/{originalAccountId}"
   aria-hidden="true"
   tabindex="-1"
>
  <!-- the avatar is duplicated information, so hide from tab order and screenreaders -->
  <Avatar account={originalAccount}
          isLink="true"
          {size} />
</a>
<style>
  .status-sidebar {
    grid-area: sidebar;
    margin-right: 15px;
  }

  .status-sidebar.size-small {
    width: 48px;
    height: 48px;
  }

  .status-sidebar.size-medium {
    width: 64px;
    height: 64px;
  }

  @media (max-width: 767px) {
    .status-sidebar {
      margin-right: 5px;
    }
  }
</style>
<script>
  import Avatar from '../Avatar.html'
  export default {
    components: {
      Avatar
    },
    computed: {
      elementId: ({ uuid }) => `status-author-avatar-${uuid}`,
      size: ({ isStatusInOwnThread, $isVeryTinyMobileSize }) => {
        if ($isVeryTinyMobileSize) {
          return isStatusInOwnThread ? 'small' : 'extra-small'
        }
        return isStatusInOwnThread ? 'medium' : 'small'
      }
    }
  }
</script>