Sound page: Make comment writing section compact before interaction (let user get to comments faster)

[qubodup]

The comment input area wastes a lot of space. It should be compact so that the user can see existing comments unless the user actually wants to write a comment (selects/clicks input area).
Current:

Improved:

https://freesound.org/s/100/

Injection code for prototyping:

(() => {
  const commentsWrap = document.querySelector('.v-spacing-top-6');
  if (!commentsWrap) return;

  const header = commentsWrap.querySelector('h6');
  const commentsSection = document.querySelector('#soundCommentsSection');
  const textarea = document.querySelector('#id_comment');
  const button = document.querySelector('#sound_comment_submit');

  if (!textarea || !commentsSection) return;

  // HEADER
  if (header) {
    const count = commentsSection.children.length;

    header.textContent = `Comments (${count})`;

    Object.assign(header.style, {
      fontSize: '18px',
      lineHeight: '1.2',
      margin: '0 0 6px 0',
      fontWeight: '600'
    });
  }

  // FORM + LAYOUT SPACING
  const form = textarea.closest('form');
  const row = form?.querySelector('.row');

  if (form) {
    form.style.marginBottom = '4px';
  }

  if (row) {
    row.style.marginBottom = '0';
  }

  // TEXTAREA BLOCK
  const textareaBlock = textarea.closest('.bw-edit-profile__textarea_block');

  if (textareaBlock) {
    textareaBlock.style.margin = '0';
    textareaBlock.style.padding = '0';
  }

  // REMOVE DEFAULT P MARGINS
  const p = textarea.closest('p');

  if (p) {
    p.style.marginTop = '0';
    p.style.marginBottom = '0';
  }

  // HELP TEXT + COUNTER
  const helpText = textareaBlock?.querySelector('.helptext');
  const counter = document.querySelector('.edit-profile-textarea-counter');

  // COMPACT DEFAULT STATE
  Object.assign(textarea.style, {
    minHeight: '52px',
    height: '52px',
    padding: '10px',
    marginTop: '0',
    marginBottom: '0',
    transition: 'height 0.15s ease'
  });

  if (helpText) {
    helpText.style.display = 'none';
    helpText.style.marginTop = '6px';
  }

  if (counter) {
    counter.style.display = 'none';
  }

  // BUTTON
  if (button) {
    button.textContent = 'Comment';

    Object.assign(button.style, {
      padding: '10px 18px',
      fontSize: '14px',
      marginTop: '0'
    });
  }

  // COMMENTS SECTION SPACING
  Object.assign(commentsSection.style, {
    marginTop: '6px',
    paddingTop: '0'
  });

  // EXPAND ON FOCUS
  const expand = () => {
    textarea.style.height = '160px';

    if (helpText) {
      helpText.style.display = '';
    }

    if (counter) {
      counter.style.display = '';
    }

    commentsSection.style.marginTop = '18px';
  };

  textarea.addEventListener('focus', expand, { once: true });
})();

YouTube has had this feature for a while:

Before interaction:

After interaction: