Slideover component content hidden inside parent DIV on mobile only

[sethaddison]

I'm using the slideover component on each row of a table (CSS/div table, not HTML table) so that the slideover opens when each row is clicked. The row contents are in a partial, and the slideover displays more info about that particular row. This is working perfectly on all devices except mobile. On mobile only, the slideover sidebar is hidden within the parent div. I'll provide a screenrecording on my mac, and one on my iphone. Any help is much appreciated!

Mac:
https://user-images.githubusercontent.com/64236105/152705465-2bafb3b0-ffae-4a4e-bbd0-e867a62cb1ff.mov

iPhone:
https://user-images.githubusercontent.com/64236105/152705574-631139a7-a0a0-4131-b43c-17167e1e65fe.mov

My Div table:

<%# Table container %>
  <div class="table-responsive">

    <%# Card Table %>
    <div class="table border-collapse whitespace-nowrap min-w-full divide-y divide-gray-200 text-sm">

      <%# Table head %>
      <div class="table-header-group h5 bg-gray-50 border-t">
        <div class="table-cell px-4 py-2 w-1/4">Date</div>
        <div class="table-cell px-4 py-2 w-1/4">Time</div>
        <div class="table-cell px-4 py-2 w-1/4">Registrations</div>
        <div class="table-cell px-4 py-2 w-1/4">Host</div>
      </div>

      <%= render partial: "open_houses/open_house", collection: @open_houses %>
    
    </div>
    <%# End table %>

  </div>
  <%# End table container %>

My row partial:

<div class="table-row-group" 
  data-controller="slideover"
  data-slideover-invisible-class="translate-x-full,opacity-0"
  data-slideover-visible-class="-translate-x-0,opacity-100"
  data-slideover-entering-class=""
  data-slideover-enter-timeout="300,300"
  data-slideover-leaving-class=""
  data-slideover-leave-timeout="300,300"
  data-slideover-active-target="#slideover-target">

  <!-- begin slideover -->
    <div class="fixed inset-0 flex z-50 transition-opacity ease-linear duration-300 opacity-0 hidden" data-slideover-target="overlay">
      <div class="fixed inset-0">
        <div class="absolute inset-0 bg-black opacity-70"></div>
      </div>
      
      <div id="slideover-target" data-slideover-target="menu" class="relative flex-1 flex flex-col ml-auto max-w-sm w-full bg-gray-50 transition ease-in-out duration-500 transform translate-x-full hidden overflow-y-auto">
        <div class="flex flex-col justify-between min-h-screen">
          
          <div id="main" class="p-7">

            <div class="flex items-center justify-between mb-6">
              <h2><%= open_house.starts_at.strftime('%a, %b %d') %></h2>
              <button data-action="slideover#toggle" class="" aria-label="Close sidebar">
                <svg class="h-5 w-5" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
              </button>
            </div>

            <div class="divide-y divide-gray-200 bg-white rounded border overflow-hidden">
              <div class="flex justify-between items-center p-2">
                <span class="h5">Listing</span>
                <span> <%= open_house.listing.title %> </span>
              </div>
              <div class="flex justify-between items-center p-2">
                <span class="h5">Date</span>
                <span> <%= open_house.starts_at.strftime('%a, %b %d') %> </span>
              </div>
              <div class="flex justify-between items-center p-2">
                <span class="h5">Time</span>
                <span> <%= open_house.starts_at.strftime('%l:%M %P') %></span>
              </div>
              <div class="flex justify-between items-center p-2">
                <span class="h5">Host</span>
                <span> <%= open_house.host.name %> </span>
              </div>
              <div class="flex justify-between items-center p-2">
                <span class="h5">Link</span>
                <%= link_to new_open_house_registration_path(open_house), target: :_blank, class: 'flex gap-1 items-center' do %>
                  Registration
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
                <% end %>
              </div>
            </div>

            <h3 class="my-5">Registrations</h3>
            
            <div class="divide-y divide-gray-200 bg-white rounded border overflow-hidden">
              <% if open_house.registrations.any? %>  
                <% open_house.registrations.each do |registration| %>
                  <div class="flex gap-1 p-3">
                    <%= image_tag gravatar_url_for(registration.contact.email), class: "inline-block h-6 w-6 mr-1 rounded-full object-cover object-center" %>
                    <span><%= registration.contact.name %></span> 
                  </div>
                <% end %>
              <% else %>
                <p class="m-3">No attendees</p>
              <% end %>
            </div>           
          
          </div>

          <div id="buttons" class="flex flex-row gap-3 border-t bg-gray-100 p-5">
            <button data-action="slideover#toggle" class="btn btn-white btn-block" aria-label="Close">Close</button>
            <%= link_to 'View Open House', listing_open_house_path(open_house.listing, open_house), class: "btn btn-primary btn-block" %>
          </div>
        
        </div>
      </div>
    </div>
  <!-- end slideover -->

  <div class="table-row hover:bg-gray-50 hover:text-primary-500 cursor-pointer" data-action="click->slideover#toggle click@window->slideover#hide">
    <div class="table-cell p-4"><%= open_house.starts_at.strftime('%a, %b %d') %></div>
    <div class="table-cell p-4"><%= open_house.starts_at.strftime('%l:%M %P') %></div>
    <div class="table-cell p-4"><%= pluralize(open_house.contacts.count, 'contact') %></div>
    <div class="table-cell p-4">
      <%= image_tag avatar_url_for(open_house.host.user), class: "inline-block h-6 w-6 mr-1 rounded-full object-cover object-center" %>
      <%= open_house.host.name %>
    </div>
  </div>
</div>

[sethaddison]

I discovered my bug, and it has nothing to do with the stimulus controller. For reference, my parent table div was using the css class -webkit-overflow-scrolling which was creating this unusual side-effect.