From eb7984f40d6cb41b0fe832ef82945d89f038b0d3 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Mon, 30 Mar 2026 19:39:54 +0200
Subject: [PATCH] fix: CustomSelect for backup schedule dropdowns, increase PWA
 cache limit

- Replace native <select> with CustomSelect for hour and day-of-month
  pickers in backup schedule settings (consistent UI)
- Increase PWA workbox cache size limit to 5MB
---
 client/src/components/Admin/BackupPanel.tsx | 35 +++++++++------------
 client/vite.config.js                       |  1 +
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Admin/BackupPanel.tsx b/client/src/components/Admin/BackupPanel.tsx
index fb62ed9..c1fd048 100644
--- a/client/src/components/Admin/BackupPanel.tsx
+++ b/client/src/components/Admin/BackupPanel.tsx
@@ -4,6 +4,7 @@ import { useToast } from '../shared/Toast'
 import { Download, Trash2, Plus, RefreshCw, RotateCcw, Upload, Clock, Check, HardDrive, AlertTriangle } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
+import CustomSelect from '../shared/CustomSelect'
 import { getApiErrorMessage } from '../../types'
 
 const INTERVAL_OPTIONS = [
@@ -355,12 +356,11 @@ export default function BackupPanel() {
               {autoSettings.interval !== 'hourly' && (
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.hour')}</label>
-                  <select
-                    value={autoSettings.hour}
-                    onChange={e => handleAutoSettingsChange('hour', parseInt(e.target.value, 10))}
-                    className="w-full sm:w-auto px-3 py-2 rounded-lg text-sm font-medium border border-gray-200 bg-white text-gray-700 focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-                  >
-                    {HOURS.map(h => {
+                  <CustomSelect
+                    value={String(autoSettings.hour)}
+                    onChange={v => handleAutoSettingsChange('hour', parseInt(v, 10))}
+                    size="sm"
+                    options={HOURS.map(h => {
                       let label: string
                       if (is12h) {
                         const period = h >= 12 ? 'PM' : 'AM'
@@ -369,13 +369,9 @@ export default function BackupPanel() {
                       } else {
                         label = `${String(h).padStart(2, '0')}:00`
                       }
-                      return (
-                        <option key={h} value={h}>
-                          {label}
-                        </option>
-                      )
+                      return { value: String(h), label }
                     })}
-                  </select>
+                  />
                   <p className="text-xs text-gray-400 mt-1">
                     {t('backup.auto.hourHint', { format: is12h ? '12h' : '24h' })}{serverTimezone ? ` (Timezone: ${serverTimezone})` : ''}
                   </p>
@@ -408,15 +404,12 @@ export default function BackupPanel() {
               {autoSettings.interval === 'monthly' && (
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.dayOfMonth')}</label>
-                  <select
-                    value={autoSettings.day_of_month}
-                    onChange={e => handleAutoSettingsChange('day_of_month', parseInt(e.target.value, 10))}
-                    className="w-full sm:w-auto px-3 py-2 rounded-lg text-sm font-medium border border-gray-200 bg-white text-gray-700 focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-                  >
-                    {DAYS_OF_MONTH.map(d => (
-                      <option key={d} value={d}>{d}</option>
-                    ))}
-                  </select>
+                  <CustomSelect
+                    value={String(autoSettings.day_of_month)}
+                    onChange={v => handleAutoSettingsChange('day_of_month', parseInt(v, 10))}
+                    size="sm"
+                    options={DAYS_OF_MONTH.map(d => ({ value: String(d), label: String(d) }))}
+                  />
                   <p className="text-xs text-gray-400 mt-1">{t('backup.auto.dayOfMonthHint')}</p>
                 </div>
               )}
diff --git a/client/vite.config.js b/client/vite.config.js
index a2d3632..61e5493 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -8,6 +8,7 @@ export default defineConfig({
     VitePWA({
       registerType: 'autoUpdate',
       workbox: {
+        maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
         globPatterns: ['**/*.{js,css,html,svg,png,woff,woff2,ttf}'],
         navigateFallback: 'index.html',
         navigateFallbackDenylist: [/^\/api/, /^\/uploads/],