Issue when the tab panel moves the page down when larger than the viewable area.

[lundie]

If my viewable area is smaller than the selected tab, the page jumps down to the bottom of the page. It then returns when clicking on a shorter tab.

Scrnliscreenshottool.mp4

<div data-controller="tabs" data-tabs-active-tab-class="-mb-px border-l border-t border-r rounded-t">
  <ul class="list-reset flex border-b">
    <li class="-mb-px mr-1" data-tabs-target="tab" data-action="click->tabs#change:prevent">
      <a class="bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-700 font-semibold no-underline" href="#">Active</a>
    </li>
    <li class="mr-1" data-tabs-target="tab" data-action="click->tabs#change:prevent">
      <a class="bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-700 font-semibold no-underline" href="#">Tab</a>
    </li>
    <li class="mr-1" data-tabs-target="tab" data-action="click->tabs#change:prevent">
      <a class="bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-700 font-semibold no-underline" href="#">Tab</a>
    </li>
    <li class="mr-1">
      <a class="bg-white inline-block py-2 px-4 text-gray-300 font-semibold no-underline" href="#">Tab</a>
    </li>
  </ul>

  <div class="hidden py-4 px-4 border-l border-b border-r" data-tabs-target="panel">
    <div class="mb-96">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam eum ex quidem voluptate ea debitis distinctio a dicta consequuntur, deleniti veniam officia sed consectetur obcaecati veritatis iusto aspernatur fugiat. Veritatis?
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit fugit mollitia non numquam consequatur! Eaque aperiam, soluta consectetur, dignissimos necessitatibus alias temporibus minima, perferendis ex aliquam minus ipsam cum voluptatum.
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem architecto dicta quos possimus, temporibus voluptate labore voluptatem quibusdam, facere quisquam maxime reiciendis saepe excepturi? Corrupti sit cumque temporibus repudiandae exercitationem.
    </div>
  </div>

  <div class="hidden py-4 px-4 border-l border-b border-r" data-tabs-target="panel">
    Tab panel 2
  </div>

  <div class="hidden py-4 px-4 border-l border-b border-r" data-tabs-target="panel">
    Tab panel 3
  </div>
</div>

[excid3]

I cannot reproduce this on v5.1.

[lundie]

Yes, my bad. I was on 4. Thanks :)

[excid3]

Ah good! If I remember right, that was caused by the "scroll tab into view" feature that I have since disabled for this reason. You can opt-in to it now, but it was enabled by default in 4.1 or something.

It was meant to just horizontally scroll the tab into view, but it would also scroll the page vertically which wasn't desired. We could restore that functionality if someone knows how to only scroll the tab horizontally without the page.