pinafore/routes/_components/profile/AccountProfileNote.html

<h2 class="sr-only">Description</h2>
<div class="account-profile-note">
  {@html massagedNote}
</div>
<style>
  .account-profile-note {
    grid-area: note;
    padding: 10px 0;
    font-size: 0.9em;
    word-wrap: break-word;
    overflow: hidden;
    white-space: pre-wrap;
  }

  :global(.account-profile-note p) {
    margin: 0 0 20px;
  }

  :global(.account-profile-note p:first-child) {
    margin: 0 0 20px;
  }

  :global(.account-profile-note p:last-child) {
    margin: 0;
  }

  @media (max-width: 767px) {
    .account-profile-note {
      padding: 5px 0;
    }
  }
</style>
<script>
  import { store } from '../../_store/store'
  import { massageUserText } from '../../_utils/massageUserText'

  export default {
    store: () => store,
    computed: {
      note: ({ account }) => account.note,
      emojis: ({ account }) => account.emojis || [],
      massagedNote: ({ note, emojis, $autoplayGifs }) => massageUserText(note, emojis, $autoplayGifs)
    }
  }
</script>