From 6cb4819ec7c66ebb8aafb84854a975b95e4e8394 Mon Sep 17 00:00:00 2001
From: Andrew Gioia <andrew@gioia.email>
Date: Mon, 16 Feb 2026 16:32:25 -0500
Subject: [PATCH] Minor changes to event modal

---
 resources/css/lib/modal.css                   |  57 -----
 .../views/event/partials/form-modal.blade.php |   2 +-
 resources/views/event/partials/form.blade.php | 201 +++++++++---------
 3 files changed, 102 insertions(+), 158 deletions(-)

diff --git a/resources/css/lib/modal.css b/resources/css/lib/modal.css
index c2deeda..c027c99 100644
--- a/resources/css/lib/modal.css
+++ b/resources/css/lib/modal.css
@@ -84,60 +84,3 @@ dialog {
         }
     }
 }
-
-/**
- * tabs using <details> and <summary>
- */
-dialog:has(.modal-tabs) {
-    @apply items-start justify-items-center;
-
-    #modal {
-        @apply relative;
-        max-height: 85dvh;
-        max-width: 48rem;
-        top: 10dvh;
-    }
-
-    form.modal {
-        @apply !block;
-    }
-}
-
-.modal-tab {
-
-    > summary {
-        @apply sticky left-6 w-32 flex flex-row gap-2;
-        top: 6rem;
-
-        &::before {
-            @apply bg-gray-10;
-        }
-
-        &::after {
-            @apply hidden;
-        }
-    }
-
-    &:nth-of-type(2) {
-        > summary { top: 8.75rem; }
-    }
-    &:nth-of-type(3) {
-        > summary { top: 11.5rem; }
-    }
-    &:nth-of-type(4) {
-        > summary { top: 14.25rem; }
-    }
-    &:nth-of-type(5) {
-        > summary { top: 17rem; }
-    }
-
-    &[open] {
-        > summary::before {
-            @apply bg-gray-100;
-        }
-    }
-
-    div.tab-content {
-        @apply flex flex-col gap-4 pl-40 pt-4 min-h-48;
-    }
-}
diff --git a/resources/views/event/partials/form-modal.blade.php b/resources/views/event/partials/form-modal.blade.php
index 741b8f0..779c515 100644
--- a/resources/views/event/partials/form-modal.blade.php
+++ b/resources/views/event/partials/form-modal.blade.php
@@ -1,4 +1,4 @@
-<x-modal.content class="modal-tabs">
+<x-modal.content>
     <x-modal.title>
         <h2>{{ $event->exists ? __('Edit event details') : __('Create a new event') }}</h2>
     </x-modal.title>
diff --git a/resources/views/event/partials/form.blade.php b/resources/views/event/partials/form.blade.php
index 054846c..af981cd 100644
--- a/resources/views/event/partials/form.blade.php
+++ b/resources/views/event/partials/form.blade.php
@@ -13,7 +13,7 @@
 
     <div class="event-tabs" data-tabs>
         <div class="tab-panels">
-            <section id="tab-details" role="tabpanel" aria-labelledby="tab-btn-details">
+            <div id="tab-details" role="tabpanel" aria-labelledby="tab-btn-details">
                 {{-- Title --}}
                 <div class="input-row input-row--1">
                     <div class="input-cell">
@@ -114,126 +114,127 @@
                         />
                     </div>
                 </div>
-            </section>
+            </div>
 
-            <section id="tab-repeat" role="tabpanel" aria-labelledby="tab-btn-repeat" hidden>
-            <div class="input-row input-row--1">
-                <div class="input-cell">
-                    <div class="mt-3">
-                        <x-input.label for="repeat_frequency" :value="__('calendar.event.recurrence.frequency')" />
-                        <x-input.select
-                            id="repeat_frequency"
-                            name="repeat_frequency"
-                            :options="$rruleOptions"
-                            :selected="$repeatFrequency"
-                            :placeholder="__('calendar.event.recurrence.none')"
-                            data-recurrence-frequency
-                        />
-                        <x-input.error :messages="$errors->get('repeat_frequency')" />
+            <div id="tab-repeat" role="tabpanel" aria-labelledby="tab-btn-repeat" hidden>
+                <div class="input-row input-row--1">
+                    <div class="input-cell">
+                        <div class="mt-3">
+                            <x-input.label for="repeat_frequency" :value="__('calendar.event.recurrence.frequency')" />
+                            <x-input.select
+                                id="repeat_frequency"
+                                name="repeat_frequency"
+                                :options="$rruleOptions"
+                                :selected="$repeatFrequency"
+                                :placeholder="__('calendar.event.recurrence.none')"
+                                data-recurrence-frequency
+                            />
+                            <x-input.error :messages="$errors->get('repeat_frequency')" />
 
-                        <div class="mt-3 {{ $repeatFrequency === '' ? 'hidden' : '' }}" data-recurrence-interval>
-                            <x-input.label for="repeat_interval" :value="__('calendar.event.recurrence.every')" />
-                            <div class="flex items-center gap-2">
-                                <x-input.text
-                                    id="repeat_interval"
-                                    name="repeat_interval"
-                                    type="number"
-                                    min="1"
-                                    max="365"
-                                    :value="$repeatInterval"
-                                />
-                                <span class="text-sm text-gray-600" data-recurrence-unit></span>
-                            </div>
-                        </div>
-
-                        <div class="mt-4 {{ $repeatFrequency !== 'weekly' ? 'hidden' : '' }}" data-recurrence-section="weekly">
-                            <p class="text-sm text-gray-600">{{ __('calendar.event.recurrence.on_days') }}</p>
-                            <div class="flex flex-wrap gap-2 mt-2">
-                                @foreach ($weekdayOptions as $code => $label)
-                                    <label class="inline-flex items-center gap-2 text-sm">
-                                        <x-input.checkbox
-                                            name="repeat_weekdays[]"
-                                            value="{{ $code }}"
-                                            :checked="in_array($code, (array) $repeatWeekdays, true)"
-                                        />
-                                        <span title="{{ $weekdayLong[$code] ?? $code }}">{{ $label }}</span>
-                                    </label>
-                                @endforeach
-                            </div>
-                        </div>
-
-                        <div class="mt-4 {{ $repeatFrequency !== 'monthly' ? 'hidden' : '' }}" data-recurrence-section="monthly">
-                            <div class="flex flex-col gap-3">
-                                <div class="flex items-center gap-4">
-                                    <x-input.radio-label
-                                        id="repeat_monthly_mode_days"
-                                        name="repeat_monthly_mode"
-                                        value="days"
-                                        label="{{ __('calendar.event.recurrence.on_days') }}"
-                                        :checked="$repeatMonthMode === 'days'"
-                                        data-monthly-mode
-                                    />
-                                    <x-input.radio-label
-                                        id="repeat_monthly_mode_weekday"
-                                        name="repeat_monthly_mode"
-                                        value="weekday"
-                                        label="{{ __('calendar.event.recurrence.on_the') }}"
-                                        :checked="$repeatMonthMode === 'weekday'"
-                                        data-monthly-mode
+                            <div class="mt-3 {{ $repeatFrequency === '' ? 'hidden' : '' }}" data-recurrence-interval>
+                                <x-input.label for="repeat_interval" :value="__('calendar.event.recurrence.every')" />
+                                <div class="flex items-center gap-2">
+                                    <x-input.text
+                                        id="repeat_interval"
+                                        name="repeat_interval"
+                                        type="number"
+                                        min="1"
+                                        max="365"
+                                        :value="$repeatInterval"
                                     />
+                                    <span class="text-sm text-gray-600" data-recurrence-unit></span>
                                 </div>
+                            </div>
 
-                                <div class="grid grid-cols-7 gap-2 {{ $repeatMonthMode !== 'days' ? 'hidden' : '' }}" data-monthly-days>
-                                    @for ($day = 1; $day <= 31; $day++)
-                                        <label class="inline-flex items-center gap-2 text-xs">
+                            <div class="mt-4 {{ $repeatFrequency !== 'weekly' ? 'hidden' : '' }}" data-recurrence-section="weekly">
+                                <p class="text-sm text-gray-600">{{ __('calendar.event.recurrence.on_days') }}</p>
+                                <div class="flex flex-wrap gap-2 mt-2">
+                                    @foreach ($weekdayOptions as $code => $label)
+                                        <label class="inline-flex items-center gap-2 text-sm">
                                             <x-input.checkbox
-                                                name="repeat_month_days[]"
-                                                value="{{ $day }}"
-                                                :checked="in_array($day, (array) $repeatMonthDays)"
+                                                name="repeat_weekdays[]"
+                                                value="{{ $code }}"
+                                                :checked="in_array($code, (array) $repeatWeekdays, true)"
                                             />
-                                            <span>{{ $day }}</span>
+                                            <span title="{{ $weekdayLong[$code] ?? $code }}">{{ $label }}</span>
                                         </label>
-                                    @endfor
-                                </div>
-
-                                <div class="flex items-center gap-3 {{ $repeatMonthMode !== 'weekday' ? 'hidden' : '' }}" data-monthly-weekday>
-                                    <x-input.select
-                                        id="repeat_month_week"
-                                        name="repeat_month_week"
-                                        :options="[
-                                            'first' => __('calendar.event.recurrence.week_order.first'),
-                                            'second' => __('calendar.event.recurrence.week_order.second'),
-                                            'third' => __('calendar.event.recurrence.week_order.third'),
-                                            'fourth' => __('calendar.event.recurrence.week_order.fourth'),
-                                            'last' => __('calendar.event.recurrence.week_order.last'),
-                                        ]"
-                                        :selected="$repeatMonthWeek"
-                                    />
-                                    <x-input.select
-                                        id="repeat_month_weekday"
-                                        name="repeat_month_weekday"
-                                        :options="$weekdayLong"
-                                        :selected="$repeatMonthWeekday"
-                                    />
+                                    @endforeach
                                 </div>
                             </div>
-                        </div>
 
-                        <div class="mt-4 text-sm text-gray-600 {{ $repeatFrequency !== 'yearly' ? 'hidden' : '' }}" data-recurrence-section="yearly">
-                            {{ __('calendar.event.recurrence.yearly_hint') }}
+                            <div class="mt-4 {{ $repeatFrequency !== 'monthly' ? 'hidden' : '' }}" data-recurrence-section="monthly">
+                                <div class="flex flex-col gap-3">
+                                    <div class="flex items-center gap-4">
+                                        <x-input.radio-label
+                                            id="repeat_monthly_mode_days"
+                                            name="repeat_monthly_mode"
+                                            value="days"
+                                            label="{{ __('calendar.event.recurrence.on_days') }}"
+                                            :checked="$repeatMonthMode === 'days'"
+                                            data-monthly-mode
+                                        />
+                                        <x-input.radio-label
+                                            id="repeat_monthly_mode_weekday"
+                                            name="repeat_monthly_mode"
+                                            value="weekday"
+                                            label="{{ __('calendar.event.recurrence.on_the') }}"
+                                            :checked="$repeatMonthMode === 'weekday'"
+                                            data-monthly-mode
+                                        />
+                                    </div>
+
+                                    <div class="grid grid-cols-7 gap-2 {{ $repeatMonthMode !== 'days' ? 'hidden' : '' }}" data-monthly-days>
+                                        @for ($day = 1; $day <= 31; $day++)
+                                            <label class="inline-flex items-center gap-2 text-xs">
+                                                <x-input.checkbox
+                                                    name="repeat_month_days[]"
+                                                    value="{{ $day }}"
+                                                    :checked="in_array($day, (array) $repeatMonthDays)"
+                                                />
+                                                <span>{{ $day }}</span>
+                                            </label>
+                                        @endfor
+                                    </div>
+
+                                    <div class="flex items-center gap-3 {{ $repeatMonthMode !== 'weekday' ? 'hidden' : '' }}" data-monthly-weekday>
+                                        <x-input.select
+                                            id="repeat_month_week"
+                                            name="repeat_month_week"
+                                            :options="[
+                                                'first' => __('calendar.event.recurrence.week_order.first'),
+                                                'second' => __('calendar.event.recurrence.week_order.second'),
+                                                'third' => __('calendar.event.recurrence.week_order.third'),
+                                                'fourth' => __('calendar.event.recurrence.week_order.fourth'),
+                                                'last' => __('calendar.event.recurrence.week_order.last'),
+                                            ]"
+                                            :selected="$repeatMonthWeek"
+                                        />
+                                        <x-input.select
+                                            id="repeat_month_weekday"
+                                            name="repeat_month_weekday"
+                                            :options="$weekdayLong"
+                                            :selected="$repeatMonthWeekday"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="mt-4 text-sm text-gray-600 {{ $repeatFrequency !== 'yearly' ? 'hidden' : '' }}" data-recurrence-section="yearly">
+                                {{ __('calendar.event.recurrence.yearly_hint') }}
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-            </section>
 
-            <section id="tab-invitees" role="tabpanel" aria-labelledby="tab-btn-invitees" hidden>
+            <div id="tab-invitees" role="tabpanel" aria-labelledby="tab-btn-invitees" hidden>
                 <div class="input-row input-row--1">
                     <div class="input-cell">
                         <p class="text-sm text-gray-600">More to come</p>
                     </div>
                 </div>
-            </section>
+            </div>
+
         </div>
 
         <div class="tab-buttons" role="tablist" aria-orientation="vertical">