From bb34e083d5e6f774304b14d5a61ec3cbbe455ffa Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Tue, 31 Mar 2026 09:59:56 +0200
Subject: [PATCH] fix: make CalendarEventModal more compact for small
 smartphone screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Modal uses flexbox column layout: scrollable body + pinned action bar
- maxHeight raised to 96vh, width uses calc(100vw - 12px)
- iconRow: gap 10→8px, padding 6→3px, minHeight 28→24px
- iconCol: width 20→18px
- inlineSelect: fontSize 0.8→0.78rem, padding 2→1px
- Title: fontSize 1.1→1rem, padding 4→3px
- Date inputs: padding 4→3px, fontSize 0.8→0.78rem, smaller labels
- Notes: minHeight 50→36px, padding tightened
- Action buttons: padding and font slightly reduced
- All section paddings reduced from 16px to 14px

v1.81.2
---
 package.json                          |  2 +-
 src/components/CalendarEventModal.tsx | 84 +++++++++++++++------------
 2 files changed, 47 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index d578ab3..7e974f2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.81.1",
+  "version": "1.81.2",
   "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
   "main": "index.js",
   "scripts": {
diff --git a/src/components/CalendarEventModal.tsx b/src/components/CalendarEventModal.tsx
index a1a601e..7bdd670 100644
--- a/src/components/CalendarEventModal.tsx
+++ b/src/components/CalendarEventModal.tsx
@@ -337,11 +337,11 @@ export default function CalendarEventModal({
 
     // Compact icon-row style used throughout
     const iconRow: React.CSSProperties = {
-        display: 'flex', alignItems: 'center', gap: '10px',
-        padding: '6px 0', minHeight: '28px',
+        display: 'flex', alignItems: 'center', gap: '8px',
+        padding: '3px 0', minHeight: '24px',
     };
     const iconCol: React.CSSProperties = {
-        width: '20px', display: 'flex', alignItems: 'center', justifyContent: 'center',
+        width: '18px', display: 'flex', alignItems: 'center', justifyContent: 'center',
         color: 'var(--weekly-text-light)', flexShrink: 0, opacity: 0.6,
     };
     const fieldCol: React.CSSProperties = {
@@ -349,8 +349,8 @@ export default function CalendarEventModal({
     };
     const inlineSelect: React.CSSProperties = {
         background: 'transparent', border: 'none',
-        fontSize: '0.8rem', cursor: 'pointer', outline: 'none',
-        color: 'var(--weekly-text)', padding: '2px 0',
+        fontSize: '0.78rem', cursor: 'pointer', outline: 'none',
+        color: 'var(--weekly-text)', padding: '1px 0',
     };
     const chipBtn = (active: boolean): React.CSSProperties => ({
         padding: '3px 10px', borderRadius: '14px', fontSize: '0.72rem', fontWeight: 500,
@@ -366,19 +366,23 @@ export default function CalendarEventModal({
         <div className="weekly-modal-overlay" onClick={onClose}>
             <div className="weekly-modal-content" onClick={e => e.stopPropagation()} style={{
                 maxWidth: '380px',
-                width: 'calc(100vw - 16px)',
+                width: 'calc(100vw - 12px)',
                 padding: '0',
-                borderRadius: '14px',
+                borderRadius: '12px',
                 boxShadow: '0 12px 40px rgba(0,0,0,0.18)',
                 border: 'none',
-                maxHeight: '90vh',
-                overflowY: 'auto',
+                maxHeight: '96vh',
+                display: 'flex',
+                flexDirection: 'column',
                 overflow: 'hidden',
             }}>
                 {/* Color accent bar at top */}
-                <div style={{ height: '4px', background: calColor }} />
+                <div style={{ height: '3px', background: calColor, flexShrink: 0 }} />
 
-                <div style={{ padding: '12px 16px 8px', display: 'flex', flexDirection: 'column', gap: '2px' }}>
+                {/* Scrollable body */}
+                <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+
+                <div style={{ padding: '8px 14px 6px', display: 'flex', flexDirection: 'column', gap: '2px' }}>
                     {error && <div style={{ color: '#ef4444', fontSize: '0.75rem', textAlign: 'center', padding: '4px', background: 'rgba(239,68,68,0.08)', borderRadius: '6px', marginBottom: '4px' }}>{error}</div>}
 
                     {/* Title */}
@@ -389,7 +393,7 @@ export default function CalendarEventModal({
                         placeholder={language === 'de' ? 'Titel hinzufügen' : 'Add title'}
                         autoFocus
                         style={{
-                            width: '100%', padding: '4px 0', fontSize: '1.1rem', fontWeight: 600,
+                            width: '100%', padding: '3px 0', fontSize: '1rem', fontWeight: 600,
                             border: 'none', borderBottom: `2px solid ${calColor}`,
                             background: 'transparent', outline: 'none',
                             color: 'var(--weekly-text)',
@@ -397,7 +401,7 @@ export default function CalendarEventModal({
                     />
 
                     {/* Calendar selector */}
-                    <div style={{ ...iconRow, padding: '4px 0' }}>
+                    <div style={{ ...iconRow, padding: '2px 0' }}>
                         <div style={{ ...iconCol, gap: '4px', width: 'auto', display: 'flex', alignItems: 'center' }}>
                             <span style={{ fontSize: '0.8rem', opacity: 0.7 }}>{selectedCal ? getProviderIcon(selectedCal.provider) : null}</span>
                             <div style={{ width: '10px', height: '10px', borderRadius: '50%', background: calColor, flexShrink: 0 }} />
@@ -458,10 +462,10 @@ export default function CalendarEventModal({
                 </div>
 
                 {/* Divider */}
-                <div style={{ height: '1px', background: 'var(--weekly-border, #eee)', margin: '0 16px' }} />
+                <div style={{ height: '1px', background: 'var(--weekly-border, #eee)', margin: '0 14px' }} />
 
                 {/* Main fields section */}
-                <div style={{ padding: '4px 16px', display: 'flex', flexDirection: 'column', gap: '0' }}>
+                <div style={{ padding: '2px 14px', display: 'flex', flexDirection: 'column', gap: '0' }}>
 
                     {/* All Day toggle */}
                     <div style={iconRow}>
@@ -491,33 +495,33 @@ export default function CalendarEventModal({
                     </div>
 
                     {/* Start & End times - compact inline */}
-                    <div style={{ ...iconRow, padding: '2px 0' }}>
+                    <div style={{ ...iconRow, padding: '1px 0' }}>
                         <div style={iconCol} />
                         <div style={{ ...fieldCol, display: 'flex', flexDirection: 'column', gap: '2px' }}>
-                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                                <span style={{ fontSize: '0.75rem', color: 'var(--weekly-text-light)', width: '32px', flexShrink: 0 }}>{language === 'de' ? 'Von' : 'From'}</span>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                <span style={{ fontSize: '0.72rem', color: 'var(--weekly-text-light)', width: '26px', flexShrink: 0 }}>{language === 'de' ? 'Von' : 'From'}</span>
                                 <input
                                     type={allDay ? "date" : "datetime-local"}
                                     value={allDay ? startDate.toISOString().split('T')[0] : toLocalISOString(startDate)}
                                     onChange={e => handleStartDateChange(e.target.value)}
                                     style={{
-                                        flex: 1, padding: '4px 8px', border: 'none', borderRadius: '6px',
+                                        flex: 1, padding: '3px 6px', border: 'none', borderRadius: '5px',
                                         background: 'var(--weekly-bg-secondary, #f3f4f6)',
-                                        fontSize: '0.8rem', outline: 'none', color: 'var(--weekly-text)',
+                                        fontSize: '0.78rem', outline: 'none', color: 'var(--weekly-text)',
                                         minWidth: 0,
                                     }}
                                 />
                             </div>
-                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                                <span style={{ fontSize: '0.75rem', color: 'var(--weekly-text-light)', width: '32px', flexShrink: 0 }}>{language === 'de' ? 'Bis' : 'To'}</span>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                <span style={{ fontSize: '0.72rem', color: 'var(--weekly-text-light)', width: '26px', flexShrink: 0 }}>{language === 'de' ? 'Bis' : 'To'}</span>
                                 <input
                                     type={allDay ? "date" : "datetime-local"}
                                     value={allDay ? endDate.toISOString().split('T')[0] : toLocalISOString(endDate)}
                                     onChange={e => setEndDate(new Date(e.target.value))}
                                     style={{
-                                        flex: 1, padding: '4px 8px', border: 'none', borderRadius: '6px',
+                                        flex: 1, padding: '3px 6px', border: 'none', borderRadius: '5px',
                                         background: 'var(--weekly-bg-secondary, #f3f4f6)',
-                                        fontSize: '0.8rem', outline: 'none', color: 'var(--weekly-text)',
+                                        fontSize: '0.78rem', outline: 'none', color: 'var(--weekly-text)',
                                         minWidth: 0,
                                     }}
                                 />
@@ -833,34 +837,38 @@ export default function CalendarEventModal({
                 </div>
 
                 {/* Divider */}
-                <div style={{ height: '1px', background: 'var(--weekly-border, #eee)', margin: '0 16px' }} />
+                <div style={{ height: '1px', background: 'var(--weekly-border, #eee)', margin: '0 14px' }} />
 
                 {/* Notes */}
-                <div style={{ padding: '6px 16px 8px' }}>
+                <div style={{ padding: '4px 14px 6px' }}>
                     <Suspense fallback={
                         <textarea
                             value={description}
                             onChange={e => setDescription(e.target.value)}
                             placeholder={language === 'de' ? 'Notizen' : 'Notes'}
                             rows={2}
-                            style={{ width: '100%', padding: '4px 0', border: 'none', background: 'transparent', resize: 'none', fontSize: '0.8rem', outline: 'none', color: 'var(--weekly-text)' }}
+                            style={{ width: '100%', padding: '3px 0', border: 'none', background: 'transparent', resize: 'none', fontSize: '0.78rem', outline: 'none', color: 'var(--weekly-text)' }}
                         />
                     }>
                         <RichTextEditor
                             value={description}
                             onChange={setDescription}
                             placeholder={language === 'de' ? 'Notizen' : 'Notes'}
-                            minHeight="50px"
+                            minHeight="36px"
                         />
                     </Suspense>
                 </div>
 
-                {/* Actions bar */}
+                {/* End scrollable body */}
+                </div>
+
+                {/* Actions bar — pinned at bottom */}
                 <div style={{
-                    padding: '8px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+                    padding: '6px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                     borderTop: '1px solid var(--weekly-border)',
                     background: 'var(--weekly-bg-secondary, #fafafa)',
-                    borderRadius: '0 0 14px 14px',
+                    borderRadius: '0 0 12px 12px',
+                    flexShrink: 0,
                 }}>
                     <div style={{ display: 'flex', gap: '4px', alignItems: 'center', flexWrap: 'wrap', flex: 1, minWidth: 0 }}>
                         {event && onDelete && !showRecurringDeleteOptions && (
@@ -868,8 +876,8 @@ export default function CalendarEventModal({
                                 onClick={() => handleDelete()}
                                 disabled={isSaving || isDeleting}
                                 style={{
-                                    padding: '5px 10px', background: 'none', color: '#ef4444',
-                                    border: 'none', borderRadius: '6px', fontSize: '0.8rem',
+                                    padding: '4px 8px', background: 'none', color: '#ef4444',
+                                    border: 'none', borderRadius: '6px', fontSize: '0.78rem',
                                     fontWeight: 500, cursor: 'pointer',
                                     opacity: isSaving || isDeleting ? 0.5 : 1
                                 }}
@@ -881,8 +889,8 @@ export default function CalendarEventModal({
                             <button
                                 onClick={() => setShowRecurringDeleteOptions(false)}
                                 style={{
-                                    padding: '5px 10px', background: 'none', color: 'var(--weekly-text-light)',
-                                    border: 'none', fontSize: '0.8rem', cursor: 'pointer',
+                                    padding: '4px 8px', background: 'none', color: 'var(--weekly-text-light)',
+                                    border: 'none', fontSize: '0.78rem', cursor: 'pointer',
                                 }}
                             >
                                 {language === 'de' ? 'Abbrechen' : 'Cancel'}
@@ -894,7 +902,7 @@ export default function CalendarEventModal({
                             </span>
                         )}
                         {!event && (
-                            <button onClick={onClose} style={{ padding: '5px 10px', fontSize: '0.8rem', color: 'var(--weekly-text-light)', border: 'none', background: 'none', cursor: 'pointer' }}>
+                            <button onClick={onClose} style={{ padding: '4px 8px', fontSize: '0.78rem', color: 'var(--weekly-text-light)', border: 'none', background: 'none', cursor: 'pointer' }}>
                                 {language === 'de' ? 'Abbrechen' : 'Cancel'}
                             </button>
                         )}
@@ -902,7 +910,7 @@ export default function CalendarEventModal({
 
                     <div style={{ display: 'flex', gap: '6px', flexShrink: 0 }}>
                         {event && (
-                            <button onClick={onClose} style={{ padding: '5px 10px', fontSize: '0.8rem', color: 'var(--weekly-text-light)', border: 'none', background: 'none', cursor: 'pointer' }}>
+                            <button onClick={onClose} style={{ padding: '4px 8px', fontSize: '0.78rem', color: 'var(--weekly-text-light)', border: 'none', background: 'none', cursor: 'pointer' }}>
                                 {language === 'de' ? 'Abbrechen' : 'Cancel'}
                             </button>
                         )}
@@ -911,7 +919,7 @@ export default function CalendarEventModal({
                             onClick={() => handleSubmit()}
                             disabled={isSaving || isDeleting}
                             style={{
-                                padding: '6px 18px', borderRadius: '8px', fontSize: '0.82rem',
+                                padding: '5px 14px', borderRadius: '7px', fontSize: '0.8rem',
                                 fontWeight: 600, backgroundColor: calColor, color: 'white',
                                 border: 'none', cursor: 'pointer',
                                 opacity: isSaving || isDeleting ? 0.7 : 1,