Merge pull request #38 from ulsklyc/copilot/update-modal-design-box-alignment

Refresh shared modal styling and standardize two-column modal layout for consistent box alignment

public/pages/calendar.js

@@ -803,7 +803,7 @@ function buildEventModalContent({ mode, event, date }) {
     </div>
 
     <div id="time-fields">
-      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+      <div class="modal-grid modal-grid--2">
         <div class="form-group">
           <label class="form-label" for="modal-start-date">${t('calendar.startDateLabel')}</label>
           <input type="date" class="form-input" id="modal-start-date" value="${startDate}">
@@ -813,7 +813,7 @@ function buildEventModalContent({ mode, event, date }) {
           <input type="time" class="form-input" id="modal-start-time" value="${startTime}">
         </div>
       </div>
-      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+      <div class="modal-grid modal-grid--2">
         <div class="form-group">
           <label class="form-label" for="modal-end-date">${t('calendar.endDateLabel')}</label>
           <input type="date" class="form-input" id="modal-end-date" value="${endDate}">
@@ -826,7 +826,7 @@ function buildEventModalContent({ mode, event, date }) {
     </div>
 
     <div id="allday-fields" style="display:none;">
-      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+      <div class="modal-grid modal-grid--2">
         <div class="form-group">
           <label class="form-label" for="modal-allday-start">${t('calendar.fromLabel')}</label>
           <input type="date" class="form-input" id="modal-allday-start" value="${startDate}">

public/pages/meals.js

@@ -560,12 +560,12 @@ function buildModalContent({ mode, date, mealType, meal }) {
   const hasIngOpen = isEdit && meal.ingredients?.some((i) => !i.on_shopping_list);
 
   return `
-    <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
-      <div class="form-group" style="margin-bottom:0">
+    <div class="modal-grid modal-grid--2">
+      <div class="form-group">
         <label class="form-label" for="modal-date">${t('meals.dateLabel')}</label>
         <input type="date" class="form-input" id="modal-date" value="${date}">
       </div>
-      <div class="form-group" style="margin-bottom:0">
+      <div class="form-group">
         <label class="form-label" for="modal-type">${t('meals.mealTypeLabel')}</label>
         <select class="form-input" id="modal-type">${typeOpts}</select>
       </div>

public/pages/tasks.js

@@ -286,14 +286,14 @@ function renderModalContent({ task = null, users = [] } = {}) {
                   style="resize:vertical">${esc(task?.description)}</textarea>
       </div>
 
-      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
-        <div class="form-group" style="margin-bottom:0">
+      <div class="modal-grid modal-grid--2">
+        <div class="form-group">
           <label class="label" for="task-priority">${t('tasks.priorityLabel')}</label>
           <select class="input" id="task-priority" name="priority" style="min-height:44px">
             ${priorityOptions}
           </select>
         </div>
-        <div class="form-group" style="margin-bottom:0">
+        <div class="form-group">
           <label class="label" for="task-category">${t('tasks.categoryLabel')}</label>
           <select class="input" id="task-category" name="category" style="min-height:44px">
             ${categoryOptions}
@@ -301,13 +301,13 @@ function renderModalContent({ task = null, users = [] } = {}) {
         </div>
       </div>
 
-      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-4)">
-        <div class="form-group" style="margin-bottom:0">
+      <div class="modal-grid modal-grid--2" style="margin-top:var(--space-4)">
+        <div class="form-group">
           <label class="label" for="task-due-date">${t('tasks.dueDateLabel')}</label>
           <input class="input" type="date" id="task-due-date" name="due_date"
                  value="${task?.due_date ?? ''}">
         </div>
-        <div class="form-group" style="margin-bottom:0">
+        <div class="form-group">
           <label class="label" for="task-due-time">${t('tasks.dueTimeLabel')}</label>
           <input class="input" type="time" id="task-due-time" name="due_time"
                  value="${task?.due_time ?? ''}">

public/styles/layout.css

@@ -643,6 +643,8 @@
   max-height: 90dvh;
   overflow-y: auto;
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  border: 1px solid var(--color-border-subtle);
+  box-shadow: var(--shadow-lg);
   animation: modal-slide-up 0.25s var(--ease-out) forwards;
   /* Cursor vom Overlay zurücksetzen */
   cursor: default;
@@ -699,6 +701,43 @@
   gap: var(--space-4);
 }
 
+/* Modal-Content-Grids (z. B. 2 Spalten in Formularen) */
+.modal-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-3);
+  align-items: stretch;
+}
+
+.modal-grid--2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.modal-grid > * {
+  min-width: 0;
+}
+
+.modal-grid > .form-group {
+  margin-bottom: 0;
+}
+
+/* Gleich hohe Karten/Boxen in Modal-Grids */
+.modal-panel__body .grid {
+  align-items: stretch;
+}
+
+.modal-panel__body .grid > .card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 639px) {
+  .modal-grid--2 {
+    grid-template-columns: 1fr;
+  }
+}
+
 .form-stack {
   display: flex;
   flex-direction: column;