From a33647f3744b788686fc9f18970a25683add7c75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 28 Sep 2021 12:58:53 +0200
Subject: [PATCH] Improve price- and datestable layouts

---
 .../Assets/scss/components/_buttons.scss      |  34 ++-
 .../Assets/scss/components/_tooltips.scss     |   1 +
 .../Templates/AjaxTable/Datestable.html       | 208 +++++++-------
 .../Templates/AjaxTable/Pricetable.html       | 263 +++++++++---------
 4 files changed, 265 insertions(+), 241 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
index 528b7309..dc486b65 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
@@ -1,26 +1,34 @@
 .button {
     @apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8;
-    @apply uppercase leading-none;
+    @apply uppercase leading-none text-center;
     @apply transition-colors outline-none focus:outline-none;
-    @apply bg-ep-secondary border-2 border-ep-secondary text-white;
-    @apply sbw:bg-sbw-secondary sbw:border-sbw-secondary;
-    @apply uch:bg-uch-secondary uch:border-uch-secondary;
+    @apply bg-ep-secondary text-white;
+    @apply sbw:bg-sbw-secondary;
+    @apply uch:bg-uch-secondary;
+
+    &:hover {
+        @apply bg-ep-primary-dark;
+        @apply sbw:bg-sbw-primary-dark;
+        @apply uch:bg-uch-primary-dark;
+    }
 
     &--active,
     &--secondary {
-        @apply bg-ep-primary border-ep-primary;
-        @apply sbw:bg-sbw-primary sbw:border-sbw-primary;
-        @apply uch:bg-uch-primary uch:border-uch-primary;
+        @apply bg-ep-primary;
+        @apply sbw:bg-sbw-primary;
+        @apply uch:bg-uch-primary;
     }
 
-    &:hover {
-        @apply bg-ep-primary-dark border-ep-primary-dark;
-        @apply sbw:bg-sbw-primary-dark sbw:border-sbw-primary-dark;
-        @apply uch:bg-uch-primary-dark uch:border-uch-primary-dark;
+    &--muted {
+        @apply bg-gray-300;
+
+        &:hover {
+            @apply bg-gray-300;
+        }
     }
 
     &--light {
-        @apply bg-white text-ep-primary border-2 border-ep-primary rounded;
+        @apply bg-white text-ep-primary border-2 border-ep-primary;
         @apply font-bold;
 
         &:hover,
@@ -30,6 +38,6 @@
     }
 
     &--small {
-        @apply px-2 py-1 md:px-4 text-xs border;
+        @apply px-2 py-1 md:px-4 text-xs sm:text-sm;
     }
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tooltips.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tooltips.scss
index c253ab80..5899f9eb 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tooltips.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tooltips.scss
@@ -3,4 +3,5 @@
 :root {
     --cooltipz-bg-color: theme('colors.ep.secondary');
     --cooltipz-text-color: theme('colors.white');
+    --cooltipz-cursor: theme('cursor.default');
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
index 28f42de8..917ebe54 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
@@ -42,80 +42,83 @@
                 </div>
             </f:if>
 
-            <div class="w-full max-w-full overflow-x-scroll mb-4">
-                <table class="min-w-full border-collapse">
-                    <thead>
-                    <tr>
-                        <th class="p-1 text-left">
-                            Termin
-                        </th>
-                        <th class="p-1 text-left">
-                            <span data-cooltipz-dir="bottom" aria-label="Nächte" role="tooltip">
-                                <svg class="w-4 h-4">
-                                    <use href="#icon-bed"></use>
-                                </svg>
-                            </span>
-                        </th>
-                        <th class="p-1 text-left whitespace-nowrap">
-                            Preis ab
-                        </th>
-                        <th class="p-1 text-left">
-                            inkl.
-                        </th>
-                        <th class="hidden lg:table-cell"></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <f:for each="{dates}" as="row" iteration="iteration">
-                        <tr class="even:bg-gray-50{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
-                            data-pricetable-target="row">
-                            <td class="px-2 py-1">
-                                <f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
-                                    <f:then>
-                                        <button class="text-ep-primary-light"
+            <table class="w-full border-collapse mb-4">
+                <thead>
+                <tr>
+                    <th class="p-1 text-left">
+                        Termin
+                    </th>
+                    <th class="p-1 text-left">
+                        <span data-cooltipz-dir="bottom" aria-label="Nächte" role="tooltip">
+                            <svg class="w-4 h-4">
+                                <use href="#icon-bed"></use>
+                            </svg>
+                        </span>
+                    </th>
+                    <th class="p-1 text-left whitespace-nowrap">
+                        Preis ab
+                    </th>
+                    <th class="p-1 text-left">
+                        inkl.
+                    </th>
+                    <th class="hidden lg:table-cell"></th>
+                </tr>
+                </thead>
+                <tbody>
+                <f:for each="{dates}" as="row" iteration="iteration">
+                    <tr class="even:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
+                        data-pricetable-target="row">
+                        <td class="px-2 py-1 md:p-2">
+                            <f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
+                                <f:then>
+                                    <button class="text-left text-ep-primary-light text-sm md:text-base"
+                                            data-action="product-details#loadPrices"
+                                            data-date-uid="{row.dateUid}">
+                                        {row.dateStart} - {row.dateEnd}
+                                    </button>
+                                    <div class="md:hidden">
+                                        <button class="button button--small sm:hidden"
                                                 data-action="product-details#loadPrices"
                                                 data-date-uid="{row.dateUid}">
-                                            {row.dateStart} - {row.dateEnd}
+                                            Details
                                         </button>
-                                        <div class="md:hidden">
-                                            <button class="button--small"
-                                                    data-action="product-details#loadPrices"
-                                                    data-date-uid="{row.dateUid}">
-                                                Details
-                                            </button>
-                                            <a href="{row.bookingUrl}" target="_blank"
-                                               class="button button--small bg-green-500 border-green-500">
-                                                Buchen
-                                            </a>
-                                        </div>
-                                    </f:then>
-                                    <f:else>
-                                        <span>
-                                            {row.dateStart} - {row.dateEnd}
-                                        </span>
-                                    </f:else>
-                                </f:if>
-                            </td>
-                            <td class="px-2 py-1">
-                                {row.nights}
-                            </td>
-                            <td class="px-2 py-1">
-                                <f:if condition="{row.pseudoPrice}">
-                                    <span class="text-sm line-through">
-                                        {row.pseudoPrice} €
+                                        <a href="{row.bookingUrl}" target="_blank"
+                                           class="button button--small bg-green-500 border-green-500 sm:hidden">
+                                            Buchen
+                                        </a>
+                                    </div>
+                                </f:then>
+                                <f:else>
+                                    <span class="block text-sm md:text-base">
+                                        {row.dateStart} - {row.dateEnd}
                                     </span>
-                                </f:if>
-                                <span class="font-bold"
-                                    data-pricetable-target="price"
-                                    data-room="{row.minPrice}"
-                                    data-bus="{row.busPrice}"
-                                    data-discount="{row.discount}">
-                                    {row.minPrice} €
+                                    <span class="block sm:hidden py-1 text-xs sm:text-sm text-gray-500 uppercase">
+                                        ausgebucht
+                                    </span>
+                                </f:else>
+                            </f:if>
+                        </td>
+                        <td class="px-2 py-1 md:p-2">
+                            {row.nights}
+                        </td>
+                        <td class="px-2 py-1 md:p-2">
+                            <f:if condition="{row.pseudoPrice}">
+                                <span class="text-sm line-through">
+                                    {row.pseudoPrice} €
                                 </span>
-                            </td>
-                            <td class="px-2 py-1">
-                                <div class="hidden md:flex items-center space-x-2">
-                                    <f:if condition="{row.busIncluded}">
+                            </f:if>
+                            <span class="font-bold text-sm md:text-base"
+                                data-pricetable-target="price"
+                                data-room="{row.minPrice}"
+                                data-bus="{row.busPrice}"
+                                data-discount="{row.discount}">
+                                {row.minPrice} €
+                            </span>
+                        </td>
+                        <td class="px-2 py-1 md:p-2">
+                            <div class="flex items-center space-x-2">
+                                <f:if condition="{row.busIncluded}">
+                                    <div class="hidden sm:block">
                                         <span data-cooltipz-dir="top"
                                               aria-label="Busfahrt"
                                               role="tooltip"
@@ -126,8 +129,10 @@
                                               <use href="#icon-bus"></use>
                                           </svg>
                                         </span>
-                                    </f:if>
-                                    <f:if condition="{row.skipassIncluded}">
+                                    </div>
+                                </f:if>
+                                <f:if condition="{row.skipassIncluded}">
+                                    <div class="hidden sm:block">
                                         <span data-cooltipz-dir="top"
                                              aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
                                              role="tooltip">
@@ -135,24 +140,29 @@
                                                 <use href="#icon-tag"></use>
                                             </svg>
                                         </span>
-                                    </f:if>
-                                    <button class="button button--light button--small hidden md:block"
-                                            data-action="pricetable#openModal"
-                                            data-type="services"
-                                            data-uid="{row.dateUid}"
-                                            data-cooltipz-dir="top"
-                                            aria-label="Alle Inklusivleistungen anzeigen"
-                                            role="tooltip">
-                                        Leistungen
-                                    </button>
-                                    <button class="md:hidden">
-                                        <svg class="w-4 h-4">
-                                            <use href="#icon-info-circle"></use>
-                                        </svg>
-                                    </button>
-                                </div>
-                            </td>
-                            <td class="px-2 py-1 hidden sm:table-cell">
+                                    </div>
+                                </f:if>
+                                <button class="button button--light button--small hidden md:block"
+                                        data-action="pricetable#openModal"
+                                        data-type="services"
+                                        data-uid="{row.dateUid}"
+                                        data-cooltipz-dir="top"
+                                        aria-label="Alle Inklusivleistungen anzeigen"
+                                        role="tooltip">
+                                    Leistungen
+                                </button>
+                                <button class="md:hidden"
+                                        data-action="pricetable#openModal"
+                                        data-type="services"
+                                        data-uid="{row.dateUid}">
+                                    <svg class="w-4 h-4">
+                                        <use href="#icon-info-circle"></use>
+                                    </svg>
+                                </button>
+                            </div>
+                        </td>
+                        <td class="px-2 py-1 md:p-2 hidden sm:table-cell">
+                            <div class="grid grid-cols-2 gap-2">
                                 <button class="button button--small"
                                         data-action="product-details#loadPrices"
                                         data-date-uid="{row.dateUid}">
@@ -175,17 +185,17 @@
                                 </f:if>
                                 <f:if condition="{row.available} && {row.showBookingButton}">
                                     <f:else>
-                                        <span class="inline-block px-2 mx-1 text-xs text-gray-500">
+                                        <span class="button button--small button--muted">
                                             ausgebucht
                                         </span>
                                     </f:else>
                                 </f:if>
-                            </td>
-                        </tr>
-                    </f:for>
-                    </tbody>
-                </table>
-            </div>
+                            </div>
+                        </td>
+                    </tr>
+                </f:for>
+                </tbody>
+            </table>
 
             <f:if condition="{dates -> f:count()} > 5 || {altProductLink}">
                 <div class="w-full flex justify-between pb-4">
@@ -221,9 +231,9 @@
         <div class="hidden fixed inset-0 w-full h-full z-50"
              data-controller="modal"
              data-action="pricetable:services-modal:open@window->modal#open">
-            <div class="absolute inset-0 w-full h-full bg-overlay-black z-25 flex items-center justify-center"
+            <div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
                  data-action="click->modal#close"></div>
-            <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white shadow w-full max-w-xl rounded">
+            <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
                 <div class="shadow flex items-center justify-between p-4 bg-ep-primary text-white rounded-t">
                     <span class="text-xl font-bold">
                         Inklusivleistungen {hotel.name}
@@ -235,7 +245,7 @@
                         </svg>
                     </button>
                 </div>
-                <div class="p-4">
+                <div class="p-4 bg-white rounded-b">
                     <f:for each="{dates}" as="row">
                         <table class="hidden table table-striped"
                                data-modal-target="content"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
index 617c7ed6..b4039573 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
@@ -44,136 +44,141 @@
                 </div>
             </f:if>
 
-            <div class="w-full max-w-full overflow-x-scroll mb-4">
-                <table class="min-w-full border-collapse">
-                    <thead>
-                    <tr>
-                        <th class="text-left">
-                            Zimmertyp
-                        </th>
-                        <th class="text-left">
-                            Preis
-                        </th>
-                        <th class="text-left">
-                            inkl.
-                        </th>
-                        <th></th>
-                        <th class="hidden lg:table-cell"></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <f:for each="{prices}" as="row">
-                        <tr class="even:bg-gray-50"
-                            data-pricetable-target="row">
-                            <td class="px-2 py-1">
-                                <f:if condition="{row.showBookingButton} && {row.available}">
-                                    <f:then>
-                                        <a href="{row.bookingUrl}"
-                                           target="_blank">
-                                            {row.roomName}
-                                        </a>
-                                        <a class="button button--small button--action lg:hidden"
-                                           href="{row.bookingUrl}"
-                                           target="_blank">
-                                            Jetzt buchen
-                                        </a>
-                                    </f:then>
-                                    <f:else>
-                                        <span>
-                                            {row.roomName}
+            <table class="w-full border-collapse mb-4">
+                <thead>
+                <tr>
+                    <th class="text-left">
+                        Zimmertyp
+                    </th>
+                    <th class="text-left">
+                        Preis
+                    </th>
+                    <th class="text-left">
+                        inkl.
+                    </th>
+                    <th></th>
+                    <th class="hidden lg:table-cell"></th>
+                </tr>
+                </thead>
+                <tbody>
+                <f:for each="{prices}" as="row">
+                    <tr class="even:bg-gray-50"
+                        data-pricetable-target="row">
+                        <td class="px-2 py-1 md:p-2">
+                            <f:if condition="{row.showBookingButton} && {row.available}">
+                                <f:then>
+                                    <a class="text-sm sm:text-base"
+                                       href="{row.bookingUrl}"
+                                       target="_blank">
+                                        {row.roomName}
+                                    </a>
+                                    <br>
+                                    <a class="button button--small bg-green-500 border-green-500 sm:hidden"
+                                       href="{row.bookingUrl}"
+                                       target="_blank">
+                                        Jetzt buchen
+                                    </a>
+                                </f:then>
+                                <f:else>
+                                    <span class="text-sm sm:text-base">
+                                        {row.roomName}
+                                    </span>
+                                </f:else>
+                            </f:if>
+                            <f:if condition="{row.available}">
+                                <f:else>
+                                    <div class="lg:hidden">
+                                        <span class="inline-block px-2 mx-1 text-xs text-gray-500">
+                                            ausgebucht
                                         </span>
-                                    </f:else>
+                                    </div>
+                                </f:else>
+                            </f:if>
+                        </td>
+                        <td class="px-2 py-1 md:p-2 whitespace-nowrap"
+                            data-pricetable-target="price"
+                            data-room="{row.minPrice}"
+                            data-bus="{row.busPrice}"
+                            data-discount="{row.discount}">
+                            <span class="text-sm sm:text-base">
+                                {row.minPrice} €
+                            </span>
+                        </td>
+                        <td class="px-2 py-1 md:p-2">
+                            <div class="flex items-center space-x-1">
+                                <f:if condition="{row.busIncluded}">
+                                    <span data-cooltipz-dir="top"
+                                          aria-label="Busfahrt"
+                                          role="tooltip"
+                                          data-pricetable-target="busIcon"
+                                          data-bus-included="{row.busIncluded}"
+                                          data-bus-price="{row.busPrice}">
+                                        <svg class="w-4 h-4">
+                                            <use href="#icon-bus"></use>
+                                        </svg>
+                                    </span>
                                 </f:if>
-                                <f:if condition="{row.available}">
-                                    <f:else>
-                                        <div class="lg:hidden">
-                                            <span class="inline-block px-2 mx-1 text-xs text-gray-500">
+                                <f:if condition="{row.skipassIncluded}">
+                                    <span data-cooltipz-dir="top"
+                                          aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
+                                          role="tooltip">
+                                      <svg class="w-4 h-4">
+                                          <use href="#icon-tag"></use>
+                                      </svg>
+                                    </span>
+                                </f:if>
+                            </div>
+                        </td>
+                        <td class="px-2 py-1 md:p-2">
+                            <f:if condition="{row.hasOptionalServices} && {row.available}">
+                                <button class="hidden sm:block button button--light button--small"
+                                        data-action="pricetable#openModal"
+                                        data-type="options"
+                                        data-uid="{row.roomUid}"
+                                        data-cooltipz-dir="top"
+                                        aria-label="Alle Zusatzleistungen anzeigen"
+                                        role="tooltip">
+                                    Optionen
+                                </button>
+                                <button class="sm:hidden"
+                                        data-action="pricetable#openModal"
+                                        data-type="options"
+                                        data-uid="{row.roomUid}">
+                                    <svg class="w-4 h-4">
+                                        <use href="#icon-info-circle"></use>
+                                    </svg>
+                                </button>
+                            </f:if>
+                        </td>
+                        <td class="hidden lg:table-cell px-2 py-1 md:p-2">
+                            <f:if condition="{row.isHideBookingButton}">
+                                <f:then>
+                                    <a class="button button--small button--mute"
+                                       href="#">
+                                        Reisen-Alert
+                                    </a>
+                                </f:then>
+                                <f:else>
+                                    <f:if condition="{row.available}">
+                                        <f:then>
+                                            <a class="button button--small bg-green-500 border-green-500 block"
+                                               href="{row.bookingUrl}" target="_blank">
+                                                Buchen
+                                            </a>
+                                        </f:then>
+                                        <f:else>
+                                            <span class="button button--small button--muted block">
                                                 ausgebucht
                                             </span>
-                                        </div>
-                                    </f:else>
-                                </f:if>
-                            </td>
-                            <td class="px-2 py-1 whitespace-nowrap"
-                                data-pricetable-target="price"
-                                data-room="{row.minPrice}"
-                                data-bus="{row.busPrice}"
-                                data-discount="{row.discount}">
-                                {row.minPrice} €
-                            </td>
-                            <td class="px-2 py-1">
-                                <div class="flex items-center space-x-1">
-                                    <f:if condition="{row.busIncluded}">
-                                        <span data-cooltipz-dir="top"
-                                              aria-label="Busfahrt"
-                                              role="tooltip"
-                                              data-pricetable-target="busIcon"
-                                              data-bus-included="{row.busIncluded}"
-                                              data-bus-price="{row.busPrice}">
-                                          <svg class="w-4 h-4">
-                                              <use href="#icon-bus"></use>
-                                          </svg>
-                                        </span>
+                                        </f:else>
                                     </f:if>
-                                    <f:if condition="{row.skipassIncluded}">
-                                        <span data-cooltipz-dir="top"
-                                              aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
-                                              role="tooltip">
-                                          <svg class="w-4 h-4">
-                                              <use href="#icon-tag"></use>
-                                          </svg>
-                                        </span>
-                                    </f:if>
-                                </div>
-                            </td>
-                            <td class="px-2 py-1">
-                                <f:if condition="{row.hasOptionalServices} && {row.available}">
-                                    <button class="hidden sm:block button button--light button--small"
-                                            data-action="pricetable#openModal"
-                                            data-type="options"
-                                            data-uid="{row.roomUid}"
-                                            data-cooltipz-dir="top"
-                                            aria-label="Alle Zusatzleistungen anzeigen"
-                                            role="tooltip">
-                                        Optionen
-                                    </button>
-                                    <button class="sm:hidden text-ep-primary">
-                                        <svg class="w-4 h-4">
-                                            <use href="#icon-info-circle"></use>
-                                        </svg>
-                                    </button>
-                                </f:if>
-                            </td>
-                            <td class="hidden lg:table-cell px-2 py-1">
-                                <f:if condition="{row.isHideBookingButton}">
-                                    <f:then>
-                                        <a class="button button--small button--mute"
-                                           href="#">
-                                            Reisen-Alert
-                                        </a>
-                                    </f:then>
-                                    <f:else>
-                                        <f:if condition="{row.available}">
-                                            <f:then>
-                                                <a class="button button--small button--action"
-                                                   href="{row.bookingUrl}" target="_blank">
-                                                    Buchen
-                                                </a>
-                                            </f:then>
-                                            <f:else>
-                                                <span class="inline-block px-2 mx-1 text-xs text-gray-500">
-                                                    ausgebucht
-                                                </span>
-                                            </f:else>
-                                        </f:if>
-                                    </f:else>
-                                </f:if>
-                            </td>
-                        </tr>
-                    </f:for>
-                    </tbody>
-                </table>
-            </div>
+                                </f:else>
+                            </f:if>
+                        </td>
+                    </tr>
+                </f:for>
+                </tbody>
+            </table>
             <f:if condition="{isSingleDate}">
                 <f:else>
                     <button class="button button--small mb-4"
@@ -208,10 +213,10 @@
         <div class="hidden fixed inset-0 w-full h-full z-50"
              data-controller="modal"
              data-action="pricetable:options-modal:open@window->modal#open">
-            <div class="absolute inset-0 w-full h-full bg-overlay-black z-25 flex items-center justify-center"
+            <div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
                  data-action="click->modal#close"></div>
-            <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white shadow w-full max-w-xl rounded">
-                <div class="absolute top-0 left-0 inset-x-0 shadow flex items-center justify-between p-4 bg-ep-primary text-white rounded-t">
+            <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
+                <div class="shadow flex items-center justify-between p-4 bg-ep-primary text-white rounded-t">
                     <span class="text-xl font-bold">
                         Optionale Zusatzleistungen
                     </span>
@@ -222,7 +227,7 @@
                         </svg>
                     </button>
                 </div>
-                <div class="h-128 p-4 mt-12 overflow-y-scroll">
+                <div class="h-128 p-4 overflow-y-scroll bg-white rounded-b">
                     <f:for each="{prices}" as="row">
                         <div class="hidden"
                              data-modal-target="content"