From 7a2defb03aa49260fdce671b64bfb2c6827e96ad Mon Sep 17 00:00:00 2001
From: Mario Zelger <15825982+mario-zelger@users.noreply.github.com>
Date: Tue, 3 Dec 2024 22:01:42 +0100
Subject: [PATCH] refactor: keep modal header and footer always visible

---
 src/components/modal/modal.less               |  23 +--
 .../components/HolidaySelectModal.tsx         | 142 +++++++++---------
 2 files changed, 85 insertions(+), 80 deletions(-)

diff --git a/src/components/modal/modal.less b/src/components/modal/modal.less
index b7b7a1e..ef22282 100644
--- a/src/components/modal/modal.less
+++ b/src/components/modal/modal.less
@@ -31,6 +31,9 @@
   transform: translateY(-50px);
   opacity: 0;
   transition: transform 0.3s ease, opacity 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
 
   &.wide {
     max-width: 800px;
@@ -46,27 +49,25 @@
   }
 
   .md-header {
+    margin-bottom: 0.5em;
+
     h3 {
-      margin: 0 0 0.5em 0;
+      margin: 0;
       font-size: 1.5rem;
       font-weight: normal;
     }
   }
 
   .md-footer {
-    margin-top: 1em;
+    margin-top: 0.5em;
     display: flex;
     align-items: center;
     gap: 0.5em;
   }
-}
 
-.modal-close {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  border: none;
-  background: none;
-  font-size: 24px;
-  cursor: pointer;
+  .md-content {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    box-sizing: border-box;
+  }
 }
\ No newline at end of file
diff --git a/src/pages/calendar/components/HolidaySelectModal.tsx b/src/pages/calendar/components/HolidaySelectModal.tsx
index d72d7ae..de10c07 100644
--- a/src/pages/calendar/components/HolidaySelectModal.tsx
+++ b/src/pages/calendar/components/HolidaySelectModal.tsx
@@ -111,77 +111,81 @@ function HolidaySelectModal() {
         <div className="md-header">
             <h3>{t('holidaysModal.title')}</h3>
         </div>
-        <div className="holiday-selection">
-            <div>{t('holidaysModal.description')}</div>
-
-            <div className="filter">
-                <div className='form-entry'>
-                    <label htmlFor={"responsible"}>{t('holidaysModal.canton')}</label>
-                    <select name="responsible" id="responsible"
-                            value={selectedCanton?.code ?? "DEFAULT"}
-                            onChange={onCantonChanged}>
-                        <option disabled value="DEFAULT">{t('holidaysModal.selectCanton')}</option>
-                        {cantons.map(canton => (
-                            <option key={canton.code}
-                                    value={canton.code}>
-                                {canton.name} ({canton.shortName})
-                            </option>
-                        ))}
-                    </select>
+        <div className="md-content">
+            <div className="holiday-selection">
+                <div>{t('holidaysModal.description')}</div>
+
+                <div className="filter">
+                    <div className='form-entry'>
+                        <label htmlFor={"responsible"}>{t('holidaysModal.canton')}</label>
+                        <select name="responsible" id="responsible"
+                                value={selectedCanton?.code ?? "DEFAULT"}
+                                onChange={onCantonChanged}>
+                            <option disabled value="DEFAULT">{t('holidaysModal.selectCanton')}</option>
+                            {cantons.map(canton => (
+                                <option key={canton.code}
+                                        value={canton.code}>
+                                    {canton.name} ({canton.shortName})
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                    <div className='form-entry'>
+                        <label htmlFor={"responsible"}>{t('holidaysModal.year')}</label>
+                        <input type="number" id="year" name="year" value={selectedYear} min={minYear}
+                               max={maxYear}
+                               onChange={onYearChanged}/>
+                    </div>
                 </div>
-                <div className='form-entry'>
-                    <label htmlFor={"responsible"}>{t('holidaysModal.year')}</label>
-                    <input type="number" id="year" name="year" value={selectedYear} min={minYear}
-                           max={maxYear}
-                           onChange={onYearChanged}/>
-                </div>
-            </div>
 
-            {selectedCanton && !isUpdatingHolidays && (
-                <table className="holidays">
-                    <thead>
-                    <tr>
-                        <th className="date">{t('holidaysModal.from')}</th>
-                        <th className="date">{t('holidaysModal.to')}</th>
-                        <th>{t('holidaysModal.type')}</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {holidays.map(holiday => (
-                        <tr key={holiday.id}>
-                            <td>
-                                <a className="cursor-pointer" onClick={() => selectDate(holiday.startDate)}>
-                                    {format(holiday.startDate, 'EEEEEE, dd.MM.yyyy')}
-                                </a>
-                            </td>
-                            <td>
-                                <a className="cursor-pointer" onClick={() => selectDate(holiday.endDate)}>
-                                    {format(holiday.endDate, 'EEEEEE, dd.MM.yyyy')}
-                                </a>
-                            </td>
-                            <td className="type">
-                                <span>{holiday.name}</span>
-                                {holiday.comment.length > 0 &&
-                                    <>
-                                        <FontAwesomeIcon icon={faCircleInfo} data-tooltip-id={holiday.id}/>
-                                        <Tooltip id={holiday.id}>
-                                            {holiday.comment}
-                                        </Tooltip>
-                                    </>
-                                }
-                            </td>
-                        </tr>
-                    ))}
-                    {holidays.length === 0 && (
-                        <tr>
-                            <td colSpan={3}>{t('holidaysModal.noResults')}</td>
-                        </tr>
-                    )}
-                    </tbody>
-                </table>
-            )}
-
-            {isUpdatingHolidays && <Loading subtext="Ferien werden geladen..."/>}
+                {selectedCanton && !isUpdatingHolidays && (
+                    <div className="table-overflow">
+                        <table className="holidays">
+                            <thead>
+                            <tr>
+                                <th className="date">{t('holidaysModal.from')}</th>
+                                <th className="date">{t('holidaysModal.to')}</th>
+                                <th>{t('holidaysModal.type')}</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {holidays.map(holiday => (
+                                <tr key={holiday.id}>
+                                    <td>
+                                        <a className="cursor-pointer" onClick={() => selectDate(holiday.startDate)}>
+                                            {format(holiday.startDate, 'EEEEEE, dd.MM.yyyy')}
+                                        </a>
+                                    </td>
+                                    <td>
+                                        <a className="cursor-pointer" onClick={() => selectDate(holiday.endDate)}>
+                                            {format(holiday.endDate, 'EEEEEE, dd.MM.yyyy')}
+                                        </a>
+                                    </td>
+                                    <td className="type">
+                                        <span>{holiday.name}</span>
+                                        {holiday.comment.length > 0 &&
+                                            <span className="icon">
+                                                <FontAwesomeIcon icon={faCircleInfo} data-tooltip-id={holiday.id}/>
+                                                <Tooltip id={holiday.id}>
+                                                    {holiday.comment}
+                                                </Tooltip>
+                                            </span>
+                                        }
+                                    </td>
+                                </tr>
+                            ))}
+                            {holidays.length === 0 && (
+                                <tr>
+                                    <td colSpan={3}>{t('holidaysModal.noResults')}</td>
+                                </tr>
+                            )}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+
+                {isUpdatingHolidays && <Loading subtext="Ferien werden geladen..."/>}
+            </div>
         </div>
         <div className="md-footer">
             <button className="btn" onClick={cancel}>{t('holidaysModal.close')}</button>