fix settings ui

This commit is contained in:
2026-06-09 11:09:03 -04:00
parent 0796982fd7
commit 834ab81a94
4 changed files with 19 additions and 29 deletions
+19 -29
View File
@@ -273,19 +273,21 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
return ( return (
<> <>
<div className="fixed inset-0 z-40 flex items-center justify-center bg-black/60"> <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="bg-slate-900 border border-slate-700 rounded-xl w-full max-w-3xl mx-4 shadow-2xl"> <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 */} {/* 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"> <div className="flex items-center gap-2">
<h2 className="text-slate-100 font-semibold">Settings</h2> <h2 className="text-slate-100 font-semibold">Settings</h2>
<span className="text-slate-500 text-xs">Admin</span> <span className="text-slate-500 text-xs">Admin</span>
</div> </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>
<div className="px-5 pt-4"> <div className="px-4 py-4 sm:px-5">
<div className="inline-flex rounded-lg border border-slate-700 overflow-hidden"> <div className="inline-flex max-w-full flex-wrap rounded-lg border border-slate-700 overflow-hidden">
<button <button
onClick={() => setActiveTab('general')} 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'}`} 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> </div>
<div className="px-5 py-4 space-y-6"> <div className="space-y-6 px-4 pb-4 sm:px-5">
{/* Error banner */} {/* Error banner */}
{saveError && ( {saveError && (
<div className="bg-red-950/50 border border-red-700 rounded-lg px-4 py-3 text-red-300 text-sm"> <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"> <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. Manually set avg minutes per test type. Leave blank to use calculated average from completed tests.
</p> </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 }) => ( {AVG_FIELDS.map(({ key, label }) => (
<div key={key}> <div key={key}>
<label className="text-slate-400 text-xs block mb-1">{label}</label> <label className="text-slate-400 text-xs block mb-1">{label}</label>
@@ -555,17 +557,17 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
</div> </div>
{/* Footer */} {/* 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' ? ( {activeTab === 'general' ? (
<> <>
<button <div className="ml-auto flex flex-col items-end gap-2 sm:flex-row sm:flex-wrap sm:justify-end">
onClick={handleRescanResults} <button
disabled={isRescanning || isPending || isSavingTimes} onClick={handleRescanResults}
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" 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> {isRescanning ? 'Rescanning…' : 'Save Results'}
<div className="flex gap-2"> </button>
<button <button
onClick={handleSaveTimes} onClick={handleSaveTimes}
disabled={isSavingTimes || isPending || isRescanning} disabled={isSavingTimes || isPending || isRescanning}
@@ -573,12 +575,6 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
> >
{isSavingTimes ? 'Saving…' : 'Save Times'} {isSavingTimes ? 'Saving…' : 'Save Times'}
</button> </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 <button
onClick={handleSave} onClick={handleSave}
disabled={isPending || isRescanning || isSavingTimes} disabled={isPending || isRescanning || isSavingTimes}
@@ -590,12 +586,6 @@ export default function ConfigModal({ onClose, currentUserId = null }) {
</> </>
) : ( ) : (
<div className="ml-auto"> <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>
)} )}
</div> </div>
Binary file not shown.
Binary file not shown.
Binary file not shown.