Dynamic max-height

<section class="insights-watch-time">
  <div class="insights-watch-time__header">
    <h1>Top watched channels {periodCurrent[$period]}</h1>
    {#if true || channelsList.length > 1}
      <button
        aria-label="Show all"
        class="insights-watch-time__toggle-all-button"
        class:insights-watch-time__toggle-all-button--show-all={isShowAll}
        on:click={() => (isShowAll = !isShowAll)}>
      </button>
    {/if}
  </div>

  <div class="insights-watch-time__list" class:insights-watch-time__list--show-all={isShowAll}>
    {#each channelsList.slice(0, isShowAll ? channelsList.length : 1) as channel, i (channel.text)}
      <div animate:flip={{ duration: 100 }} class="insights-watch-time__list-item">
        <span
          class="insights-watch-time__list-item-index"
          class:insights-watch-time__list-item-index--show-all={isShowAll}>{i + 1}</span>
        <img class="insights-watch-time__channel-picture" src={channel.channelPicture} alt="Channel" />
        <div class="insights-watch-time__item">
          <a target="_blank" href="https://www.youtube.com/{channel.text}">
            {channel.text}
          </a>
        </div>
        <div class="insights-watch-time__time-spent">
          {channel.timeSpent}
        </div>
      </div>
    {/each}
  </div>
</section>