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

fix(storage): StoragePanel rows wrap on narrow viewports

Browse Source 
Upload Limit, Stale Uploads, and Media Retention rows now use
flex-wrap with gap-x-3 gap-y-2; input + unit pairs that must stay
together are wrapped in a nested flex group so they migrate as a unit.
Desktop spacing identical (gap-x-3 ≡ original gap-3 when content fits
on one line).
This commit is contained in:
Jannis Braun
2026-05-05 23:24:10 +02:00
parent 899dc8b601
commit 438e7fb113
1 changed files with 41 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/modals/instanceSettingsPanels/StoragePanel.tsx
+10 -6
View File
@@ -262,8 +262,9 @@ export function StoragePanel() {
<div> <div>
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Upload Limit</div> <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Upload Limit</div>
<div className="rounded-lg bg-white/[0.02] p-3.5"> <div className="rounded-lg bg-white/[0.02] p-3.5">
<div className="flex items-center gap-3"> <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
<label className="text-sm text-txt-secondary whitespace-nowrap">Max file size</label> <label className="text-sm text-txt-secondary whitespace-nowrap">Max file size</label>
<div className="flex items-center gap-3">
<input <input
type="number" type="number"
min={uploadUnit === 'GB' ? 0.001 : 1} min={uploadUnit === 'GB' ? 0.001 : 1}
@@ -288,6 +289,7 @@ export function StoragePanel() {
</button> </button>
))} ))}
</div> </div>
</div>
<button <button
onClick={handleUploadLimitSave} onClick={handleUploadLimitSave}
disabled={!uploadLimitDirty || uploadLimitSaving || parsedUploadMb === null} disabled={!uploadLimitDirty || uploadLimitSaving || parsedUploadMb === null}
@@ -308,7 +310,7 @@ export function StoragePanel() {
)} )}
{hasOrphans && ( {hasOrphans && (
<div className="flex gap-2"> <div className="flex flex-wrap gap-2">
<button <button
onClick={() => handleCleanup(true)} onClick={() => handleCleanup(true)}
disabled={cleaning} disabled={cleaning}
@@ -358,7 +360,7 @@ export function StoragePanel() {
<div className="text-xs text-txt-tertiary"> <div className="text-xs text-txt-tertiary">
Abandoned tus upload sessions in <code className="text-txt-secondary">.tus/</code> (paused/crashed without DELETE). Auto-expire runs every 24 hours; this lets you sweep proactively. Abandoned tus upload sessions in <code className="text-txt-secondary">.tus/</code> (paused/crashed without DELETE). Auto-expire runs every 24 hours; this lets you sweep proactively.
</div> </div>
<div className="flex items-center gap-3"> <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
<label className="text-sm text-txt-secondary whitespace-nowrap">Max age (hours)</label> <label className="text-sm text-txt-secondary whitespace-nowrap">Max age (hours)</label>
<input <input
type="number" type="number"
@@ -375,7 +377,7 @@ export function StoragePanel() {
/> />
</div> </div>
<div className="flex gap-2"> <div className="flex flex-wrap gap-2">
<button <button
onClick={() => handleTusCleanup(true)} onClick={() => handleTusCleanup(true)}
disabled={tusCleaning || tusMaxAgeHours <= 0} disabled={tusCleaning || tusMaxAgeHours <= 0}
@@ -418,8 +420,9 @@ export function StoragePanel() {
<div> <div>
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Media Retention</div> <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Media Retention</div>
<div className="rounded-lg bg-white/[0.02] p-3.5 space-y-3"> <div className="rounded-lg bg-white/[0.02] p-3.5 space-y-3">
<div className="flex items-center gap-3"> <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
<label className="text-sm text-txt-secondary whitespace-nowrap">Delete chat media older than</label> <label className="text-sm text-txt-secondary whitespace-nowrap">Delete chat media older than</label>
<div className="flex items-center gap-3">
<input <input
type="number" type="number"
min={1} min={1}
@@ -429,8 +432,9 @@ export function StoragePanel() {
/> />
<span className="text-sm text-txt-tertiary">days</span> <span className="text-sm text-txt-tertiary">days</span>
</div> </div>
</div>
<div className="flex gap-2"> <div className="flex flex-wrap gap-2">
<button <button
onClick={() => handleMediaCleanup(true)} onClick={() => handleMediaCleanup(true)}
disabled={mediaCleaning || mediaAgeDays < 1} disabled={mediaCleaning || mediaAgeDays < 1}