From 26919e2ee3f97110cff00f0fc43654fa78c012a8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 6 Apr 2026 10:31:54 +0000
Subject: [PATCH] feat: modernize modal styling and align two-column modal
 boxes

Agent-Logs-Url: https://github.com/ulsklyc/oikos/sessions/7153de23-b6c6-423d-974c-cf3b961cbbad

Co-authored-by: ulsklyc <108589275+ulsklyc@users.noreply.github.com>
---
 public/pages/calendar.js |  6 +++---
 public/pages/meals.js    |  6 +++---
 public/pages/tasks.js    | 12 ++++++------
 public/styles/layout.css | 40 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/public/pages/calendar.js b/public/pages/calendar.js
index 3b7519c..72fb040 100644
--- a/public/pages/calendar.js
+++ b/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}">
diff --git a/public/pages/meals.js b/public/pages/meals.js
index 126c918..07dcfb9 100644
--- a/public/pages/meals.js
+++ b/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>
diff --git a/public/pages/tasks.js b/public/pages/tasks.js
index dc7af1d..6575170 100644
--- a/public/pages/tasks.js
+++ b/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 ?? ''}">
diff --git a/public/styles/layout.css b/public/styles/layout.css
index 9ca52cd..11658f3 100644
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -642,6 +642,8 @@
   width: 100%;
   max-height: 90dvh;
   overflow-y: auto;
+  border: 1px solid var(--color-border-subtle);
+  box-shadow: var(--shadow-lg);
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   animation: modal-slide-up 0.25s var(--ease-out) forwards;
   /* Cursor vom Overlay zurücksetzen */
@@ -673,6 +675,7 @@
 .modal-panel__title {
   font-size: var(--text-md);
   font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.01em;
 }
 
 .modal-panel__close {
@@ -699,6 +702,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;