pinafore/routes/_components/compose/ComposeBox.html

<div class="compose-box {{overLimit ? 'over-char-limit' : ''}}">
  <ComposeAuthor />
  <ComposeInput :realm />
  <ComposeLengthGauge />
  <ComposeToolbar :realm />
  <ComposeLengthIndicator />
  <ComposeMedia :realm />
  <ComposeButton />
</div>
<style>
  .compose-box {
    border-radius: 4px;
    padding: 20px;
    display: grid;
    align-items: flex-start;
    grid-template-areas:
      "avatar display-name handle    handle"
      "avatar input        input     input"
      "avatar gauge        gauge     gauge"
      "avatar toolbar      toolbar   length"
      "avatar media        media     media"
      "avatar button       button    button";
    grid-template-columns: min-content minmax(0, max-content) 1fr 1fr;
    border-bottom: 1px solid var(--main-border);
    width: 560px;
    max-width: calc(100vw - 40px);
  }

  @media (max-width: 767px) {
    .compose-box {
      padding: 10px 10px;
      max-width: calc(100vw - 20px);
      width: 580px;
    }
  }
</style>
<script>
  import ComposeToolbar from './ComposeToolbar.html'
  import ComposeLengthGauge from './ComposeLengthGauge.html'
  import ComposeLengthIndicator from './ComposeLengthIndicator.html'
  import ComposeAuthor from './ComposeAuthor.html'
  import ComposeInput from './ComposeInput.html'
  import ComposeButton from './ComposeButton.html'
  import ComposeMedia from './ComposeMedia.html'

  export default {
    components: {
      ComposeAuthor,
      ComposeToolbar,
      ComposeLengthGauge,
      ComposeLengthIndicator,
      ComposeInput,
      ComposeButton,
      ComposeMedia
    }
  }
</script>