devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 40 Packages Projects Releases 1 Wiki Activity

fix: improve Instance settings section spacing and save UX

Browse Source 
- Section headings: text-lg with descriptions, dividers spaced my-10
- GeneralPanel: convert to auto-save (toggles save immediately,
  text fields save on blur) — no more hidden save bar
- StreamingPanel: restore sticky save bar (complex multi-field form
  needs explicit save, and it's the only sticky bar now)
This commit is contained in:
Jannis Braun
2026-03-22 03:43:23 +01:00
parent fbf83cf8f4
commit ca9b971c29
3 changed files with 87 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/modals/settingsPanels/InstancePanel.tsx
+12 -8
View File
@@ -25,35 +25,39 @@ export function InstancePanel() {
}, [fetchInstanceSettings, fetchStreamingLimits]);
return (
<div className="space-y-0">
<div>
{/* General */}
<h3 ref={sectionRef('general')} className="text-base font-semibold text-txt-primary mb-4">
<h3 ref={sectionRef('general')} className="text-lg font-semibold text-txt-primary mb-1">
General
</h3>
<p className="text-sm text-txt-tertiary mb-5">Configure your Backspace instance. These settings affect all users.</p>
<GeneralPanel />
<div className="border-t border-white/[0.04] my-6" />
<div className="border-t border-white/[0.04] my-10" />
{/* Streaming */}
<h3 ref={sectionRef('streaming')} className="text-base font-semibold text-txt-primary mb-4">
<h3 ref={sectionRef('streaming')} className="text-lg font-semibold text-txt-primary mb-1">
Streaming
</h3>
<p className="text-sm text-txt-tertiary mb-5">These limits apply to all users on this instance. Users can pick values within these bounds.</p>
<StreamingPanel />
<div className="border-t border-white/[0.04] my-6" />
<div className="border-t border-white/[0.04] my-10" />
{/* Storage */}
<h3 ref={sectionRef('storage')} className="text-base font-semibold text-txt-primary mb-4">
<h3 ref={sectionRef('storage')} className="text-lg font-semibold text-txt-primary mb-1">
Storage
</h3>
<p className="text-sm text-txt-tertiary mb-5">Monitor file storage usage and clean up orphaned files.</p>
<StoragePanel />
<div className="border-t border-white/[0.04] my-6" />
<div className="border-t border-white/[0.04] my-10" />
{/* Users */}
<h3 ref={sectionRef('users')} className="text-base font-semibold text-txt-primary mb-4">
<h3 ref={sectionRef('users')} className="text-lg font-semibold text-txt-primary mb-1">
Users
</h3>
<p className="text-sm text-txt-tertiary mb-5">View and manage user accounts on this instance.</p>
<UsersPanel />
</div>
);