From 834ab81a94bd55f7956eb893bd1b82a95b055e25 Mon Sep 17 00:00:00 2001
From: Mia Wu <mia.wu@wnc.com.tw>
Date: Tue, 9 Jun 2026 11:09:03 -0400
Subject: [PATCH] fix settings ui

---
 dashboard/src/components/ConfigModal.jsx |  48 +++++++++--------------
 server/data/dashboard.db                 | Bin 356352 -> 356352 bytes
 server/data/dashboard.db-shm             | Bin 32768 -> 0 bytes
 server/data/dashboard.db-wal             | Bin 45352 -> 0 bytes
 4 files changed, 19 insertions(+), 29 deletions(-)
 delete mode 100644 server/data/dashboard.db-shm
 delete mode 100644 server/data/dashboard.db-wal

diff --git a/dashboard/src/components/ConfigModal.jsx b/dashboard/src/components/ConfigModal.jsx
index 57a102a..8db284c 100644
--- a/dashboard/src/components/ConfigModal.jsx
+++ b/dashboard/src/components/ConfigModal.jsx
@@ -273,19 +273,21 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
 
   return (
     <>
-      <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/60">
-        <div className="bg-slate-900 border border-slate-700 rounded-xl w-full max-w-3xl mx-4 shadow-2xl">
+      <div className="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/60 p-2 sm:items-center sm:p-4">
+        <div className="flex max-h-[calc(100dvh-1rem)] w-full max-w-3xl flex-col overflow-y-auto rounded-xl border border-slate-700 bg-slate-900 shadow-2xl sm:max-h-[calc(100dvh-2rem)]">
           {/* Header */}
-          <div className="flex items-center justify-between px-5 py-4 border-b border-slate-800">
+          <div className="flex flex-none items-center justify-between border-b border-slate-800 px-4 py-3 sm:px-5 sm:py-4">
             <div className="flex items-center gap-2">
               <h2 className="text-slate-100 font-semibold">Settings</h2>
               <span className="text-slate-500 text-xs">Admin</span>
             </div>
-            <button onClick={onClose} className="text-slate-400 hover:text-slate-200">✕</button>
+            <button onClick={onClose} className="rounded p-1 text-slate-400 hover:text-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
+              ✕
+            </button>
           </div>
 
-          <div className="px-5 pt-4">
-            <div className="inline-flex rounded-lg border border-slate-700 overflow-hidden">
+          <div className="px-4 py-4 sm:px-5">
+            <div className="inline-flex max-w-full flex-wrap rounded-lg border border-slate-700 overflow-hidden">
               <button
                 onClick={() => setActiveTab('general')}
                 className={`px-3 py-1.5 text-sm ${activeTab === 'general' ? 'bg-slate-700 text-slate-100' : 'bg-slate-900 text-slate-300 hover:bg-slate-800'}`}
@@ -301,7 +303,7 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
             </div>
           </div>
 
-          <div className="px-5 py-4 space-y-6">
+          <div className="space-y-6 px-4 pb-4 sm:px-5">
             {/* Error banner */}
             {saveError && (
               <div className="bg-red-950/50 border border-red-700 rounded-lg px-4 py-3 text-red-300 text-sm">
@@ -385,7 +387,7 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
                   <p className="text-slate-500 text-xs mb-3">
                     Manually set avg minutes per test type. Leave blank to use calculated average from completed tests.
                   </p>
-                  <div className="grid grid-cols-3 gap-3">
+                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
                     {AVG_FIELDS.map(({ key, label }) => (
                       <div key={key}>
                         <label className="text-slate-400 text-xs block mb-1">{label}</label>
@@ -555,17 +557,17 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
           </div>
 
           {/* Footer */}
-          <div className="flex justify-between gap-2 px-5 py-4 border-t border-slate-800">
+          <div className="flex flex-col gap-3 border-t border-slate-800 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-5">
             {activeTab === 'general' ? (
               <>
-                <button
-                  onClick={handleRescanResults}
-                  disabled={isRescanning || isPending || isSavingTimes}
-                  className="px-4 py-2 text-sm rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 disabled:opacity-50 transition-colors"
-                >
-                  {isRescanning ? 'Rescanning…' : 'Save Results'}
-                </button>
-                <div className="flex gap-2">
+                <div className="ml-auto flex flex-col items-end gap-2 sm:flex-row sm:flex-wrap sm:justify-end">
+                  <button
+                    onClick={handleRescanResults}
+                    disabled={isRescanning || isPending || isSavingTimes}
+                    className="px-4 py-2 text-sm rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 disabled:opacity-50 transition-colors"
+                  >
+                    {isRescanning ? 'Rescanning…' : 'Save Results'}
+                  </button>
                   <button
                     onClick={handleSaveTimes}
                     disabled={isSavingTimes || isPending || isRescanning}
@@ -573,12 +575,6 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
                   >
                     {isSavingTimes ? 'Saving…' : 'Save Times'}
                   </button>
-                  <button
-                    onClick={onClose}
-                    className="px-4 py-2 text-sm rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 transition-colors"
-                  >
-                    Cancel
-                  </button>
                   <button
                     onClick={handleSave}
                     disabled={isPending || isRescanning || isSavingTimes}
@@ -590,12 +586,6 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
               </>
             ) : (
               <div className="ml-auto">
-                <button
-                  onClick={onClose}
-                  className="px-4 py-2 text-sm rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 transition-colors"
-                >
-                  Close
-                </button>
               </div>
             )}
           </div>
diff --git a/server/data/dashboard.db b/server/data/dashboard.db
index 659e622dc5be1a9dcf57b1ec956b4ff515670ea2..633f14c58b0030f9268f2587d34c4bd6b172744a 100644
GIT binary patch
delta 461
zcmaivF>6#o6ovO?9}#SxBIyE2kye?xGjnGqc0mhSLSi9;MdZ%Cb72YD-2}{**;wo!
zNZ~)Qe#AfEPl>gpw=)lH1H$Rf;hgiW?zUEUTm9^$X>aByJ6C+Uc=u*<aB*%APp3y8
zPWO~4OJV~iQi+9CN{NZ2iYDR+5^boyl8}i`i$~&=Q_5V?x?D^N1ppApdLX9chM+Q5
zU^O1lbCl$Q8SGjzy)q&t17vlaOd*K&a$1-50u10wGsx}QydQAi;`Q6{&FjzGSMMhu
z{e1q(E|1{w%kkuRFF4>rXpkc0s#FD24nBt>p0f2Zg9yiAHGyb!HY95!v+;;VC3r=o
zqDClXZ!>bWXa}@Zyo!SoQse<teN_jFCZG+)3^kaCRt=8iY&v`7@zc?0w9(y<y8G_W
ykLQbD-M44Io3{H$*ghG*XqGb`-!A@kO?$iA+}-?N^lQKFn{~gj?#JKz_U8lVtB3yp

delta 459
zcmajaze-#|6bA6US6N7kTt(~xv9L`zbI!~;Gg__*DO^Zl*v>G2&V(hnN(xQqYOyb1
zkvFium>0;SNZNpXD!q_45ctZEkKebv-(KEt_lx7Ey*WL8b$Oy+@$+o*W%_PDJqkx3
zccT)qA~R8pVkl#vh$6)%F04*$RY$5O<m{p;5Fr3mD<#{KF=Z4CCJ8WWt-)tS$YeZZ
zXH5>ygHN6)nPiIAH!-MSWv&sx7B!sC=Xx=q0Qofx!5t%e#Cuk*-ZnS;pI%;mo7c%~
zHa&cQI4S3ogAcntl|VUI>(Gg-AdaimRAK_7gw=XXNHJ&Oq!l5N_pTZnVNe#2QJmEb
zn7mE7*ug0(nGqD&c;|(|6^T_sw2?R@D#@!ECTk)Mo?|(gFa9BZJ{pbM?qSqDbbo$q
wp8e{+Z~Si7U;KU8j@P!HT`cn5*<;tVcgyk4_&?3-e$_XtzFqZexBdFhCl*VFivR!s

diff --git a/server/data/dashboard.db-shm b/server/data/dashboard.db-shm
deleted file mode 100644
index 3917a73c1e9d36b1d5c0f2eda9e852ec4fc23216..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 32768
zcmeI*KWYL&6bIm0H?EsVAmvtqwRj5;kS;}zBE&m*gn*YwCwK#IU}GVO-~seaFu^8;
zU2wl2JmwF>gZU0H(`?2mr;I96dg;gb7PWm|EI*Ee;rcLp-K{?7Uv)9vzmF!(jpw7)
zcXHp;RW94VLlv`LR6h4Jum4!bwh$mdfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+
z009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBly
zK!5-N0tEiGK#?9&ep^upv`?Uuy6Lff*LGt9AyB0!4g?4gAV7csftCoA@xMU+T|fvB
mAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!Cvg37i3{Pbj_s

diff --git a/server/data/dashboard.db-wal b/server/data/dashboard.db-wal
deleted file mode 100644
index df9ffcd4097def7c3d224b1042ad376c21378426..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 45352
zcmeI*OK99h90%~-Y)F$xyF$bm4-z2-sZ{3uSjoktYDhy9XpMN$d6p2<)WjwgG$BFo
zCenjfK@dSv^k~3?kAtW;5h|^h9<(6!L8;V}&YuusVpM1@N%{WS!0zn+|IB<Qr{VXV
z(aRmHwWC+=snzbRRo6GaE|358`I{FG=j%Vr{`T5JY3lfU`|#^m-gxrR$CnRQjpdf6
zIrMDx78e8{009U<00Izz00bZa0SG`~w*o68ZJo8g)rr0?zA%**)7*TRd*ST!EzYzu
zEz_a{Gii>Uo*bGUdvt2-q&<0Rz$MOAVoGuDoTfZ5%N^4?3a_F{Qj44<Pl?(Pq@$5I
zVhPDY#~@;0J}}KJ^_nP^a<(QUMgpgX1Sx2+(h%bf=bm~RQ+76KmX*qm5D^nqe!ZWJ
zFm;ra7wf0G#Z^n_m1FhJTF>f4Zx>%Y6aF!f^HX_fa&qkW<Hv{M!qD*efbr4tV1<xO
zYMF_aDvRW!^MoeOvM|gu?n2PYr_6}w#>h;CBc<=rFsG$RfiQ1`4^fof>!gEXBoRf8
zG+GfEwaeN%;kflYdXs2*V)i^)qg<SsI<vz#%A6jk=5=Ge;Oh_9dcS)A?(e#*#%f*Q
z=jI>PTU-!;00bZa0SG_<0uX=z1Rwwb2<&%(?nYmIeW|0ZqtVk<Ry4|p?kIng8|wlO
zJ^jqv4}N)i4eJ8?eXh}e2tWV=5P$##AOHafKmY;|fWUTv9oGf6<Oo_XzBfGh#O1*%
zM^JAX<OsGC;xhyw009U<00Izz00bZa0SMf(!0nYIX#7`>U}AJq%+5YV7f-OUbK|4q
z1Cq1gog&JWU_(hPq^OLQ!b%^7vs7ryVhox~Vpz<YQ)wvGArPSy$x(_DZ*V@7=!_NA
zs!&o6G<#vZ$dNN&k_5qvDw~i?DuGBvr6=Vn%9e*_$+zYRct5o*sajN($=s47_@G6X
z`sXe_T-6KIn>TCCo5&H|@;^Loga8B}009U<00Izz00bZa0SN3Vfz5h>1C5?~i4inP
z_d2UCZsZ8QKl1zX)z4Nht=9|Os5NiwsR5uf5P$##AOHafKmY;|fB*y_009W>R-mii
z=&hfdFB?Br>jGQ$7Z{$o`qJRwyC0!mV7JJ)9|91700bZa0SG_<0uX=z1R${21a_<!
z*s{OCy^oPEzP<R$J5{|vTREZ-=M?U>IYfUT009U<00Izz00bZa0SN40ft8W=|2d~H
zESwz~9(`o)IXX5yb>h_YKn~7EQ_klj+Ij6mj^1nIVv5<gpjp&ZCXrk$=lSsxw^uG0
zYm5y^(Q;ZJ@zOKK6mwKC7o6echdGp!4?`w`DG_uuCDUKNPTo2aqqmIN%!47moQFua
zom04(%U?Nmd+smr>0PfL{^jDIN2+>(w&t~3^IF+t02c%x009U<00Izz00bZa0SG_<
z0{dTJvs|G4-}V>ietG`F`Lzd@u)o0mpKgo*0uX=z1Rwwb2tWV=5P$##Ah4sr=Kcch
x<@+uB3w-j{!5{Cx@A?wz1$LA}BLpA-0SG_<0uX=z1Rwwb2tZ)}3hYoX@E07k`cMD>