From 4405a9498d0211eb4ea0647f935268f7231c37b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Mon, 25 Nov 2024 09:39:30 +0100
Subject: [PATCH] fix: make modal scrollable for large contents

---
 templates/htmx_modal.html.twig | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/templates/htmx_modal.html.twig b/templates/htmx_modal.html.twig
index 24b48e6..07afc8b 100644
--- a/templates/htmx_modal.html.twig
+++ b/templates/htmx_modal.html.twig
@@ -1,8 +1,8 @@
 <div id="htmx-modal" class="fixed inset-0 w-full h-full z-50" {{ stimulus_controller('modal') }} {{ stimulus_action('modal', 'close', 'modal-close@window') }}>
     <div class="absolute inset-0 w-full h-full bg-black/80" {{ stimulus_action('modal', 'close', 'click') }}></div>
     <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 w-full max-w-2xl">
-        <div class="relative bg-white p-8 rounded-md">
-            <div class="flex justify-between pb-4">
+        <div class="relative bg-white py-8 rounded-md">
+            <div class="flex justify-between pb-4 px-8">
                 <div class="text-2xl font-bold">
                     {% block title %}{% endblock %}
                 </div>
@@ -12,7 +12,11 @@
                     {{ icon('close', 'w-6 h-6')}}
                 </button>
             </div>
-            {% block content %}{% endblock %}
+            <div class="max-h-96 overflow-y-scroll">
+                <div class="px-8">
+                    {% block content %}{% endblock %}
+                </div>
+            </div>
             <div class="htmx-indicator absolute top-0 left-0 inset-0 bg-white/90 flex items-center justify-center"
                  id="htmx-modal-indicator">
                 {% include '_partials/_spinner.html.twig' with { 'class': 'w-8 h-8'} %}