Show scrollbars for tables in mobile view only when required

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue

@@ -3,7 +3,7 @@
         <h1 class="mb-4">
             Meine Buchungen
         </h1>
-        <div class="w-full max-w-full overflow-x-scroll">
+        <div class="w-full max-w-full overflow-x-auto">
             <table class="min-w-full border border-gray-200 border-collapse mb-8 text-sm">
                 <thead>
                     <tr>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html

@@ -7,7 +7,7 @@
             <f:render partial="NotBookable" arguments="{_all}"/>
         </f:then>
         <f:else>
-            <div class="w-full max-w-full overflow-x-scroll"
+            <div class="w-full max-w-full overflow-x-auto"
                  data-controller="pricetable"
                  data-pricetable-show-all-rows-value="true">
                 <table class="min-w-full border border-gray-200 border-collapse mb-8">

public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/EventPricetable.html

@@ -17,7 +17,7 @@
     </f:section>
 
     <f:section name="Table">
-        <div class="w-full max-w-full overflow-x-scroll">
+        <div class="w-full max-w-full overflow-x-auto">
             <table class="min-w-full border border-gray-200 border-collapse mb-8">
                 <f:for each="{categories}" as="category" key="categoryKey">
                     <f:if condition="{v:variable.get(name: 'pricetable.{categoryKey}', useRawKeys: 1) -> f:count()} > 0">