From 438e7fb113d550c8f67e18b867a1346acef04b00 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Tue, 5 May 2026 23:24:10 +0200
Subject: [PATCH] fix(storage): StoragePanel rows wrap on narrow viewports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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).
---
 .../instanceSettingsPanels/StoragePanel.tsx   | 78 ++++++++++---------
 1 file changed, 41 insertions(+), 37 deletions(-)

diff --git a/packages/web/src/components/modals/instanceSettingsPanels/StoragePanel.tsx b/packages/web/src/components/modals/instanceSettingsPanels/StoragePanel.tsx
index a9213608..203a3c48 100644
--- a/packages/web/src/components/modals/instanceSettingsPanels/StoragePanel.tsx
+++ b/packages/web/src/components/modals/instanceSettingsPanels/StoragePanel.tsx
@@ -262,31 +262,33 @@ export function StoragePanel() {
       <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="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>
-            <input
-              type="number"
-              min={uploadUnit === 'GB' ? 0.001 : 1}
-              step={uploadUnit === 'GB' ? 0.5 : 1}
-              value={uploadLimitInput}
-              onChange={(e) => setUploadLimitInput(e.target.value)}
-              className="input-standard w-24 px-2 py-1 text-sm text-center"
-            />
-            <div className="flex items-center gap-0.5 rounded-lg bg-surface-input p-0.5">
-              {(['MB', 'GB'] as const).map((u) => (
-                <button
-                  key={u}
-                  type="button"
-                  onClick={() => handleUploadUnitChange(u)}
-                  className={`px-2.5 py-1 rounded text-[12px] font-medium transition-colors ${
-                    uploadUnit === u
-                      ? 'bg-accent-primary text-white'
-                      : 'text-txt-tertiary hover:text-txt-primary'
-                  }`}
-                >
-                  {u}
-                </button>
-              ))}
+            <div className="flex items-center gap-3">
+              <input
+                type="number"
+                min={uploadUnit === 'GB' ? 0.001 : 1}
+                step={uploadUnit === 'GB' ? 0.5 : 1}
+                value={uploadLimitInput}
+                onChange={(e) => setUploadLimitInput(e.target.value)}
+                className="input-standard w-24 px-2 py-1 text-sm text-center"
+              />
+              <div className="flex items-center gap-0.5 rounded-lg bg-surface-input p-0.5">
+                {(['MB', 'GB'] as const).map((u) => (
+                  <button
+                    key={u}
+                    type="button"
+                    onClick={() => handleUploadUnitChange(u)}
+                    className={`px-2.5 py-1 rounded text-[12px] font-medium transition-colors ${
+                      uploadUnit === u
+                        ? 'bg-accent-primary text-white'
+                        : 'text-txt-tertiary hover:text-txt-primary'
+                    }`}
+                  >
+                    {u}
+                  </button>
+                ))}
+              </div>
             </div>
             <button
               onClick={handleUploadLimitSave}
@@ -308,7 +310,7 @@ export function StoragePanel() {
           )}
 
           {hasOrphans && (
-            <div className="flex gap-2">
+            <div className="flex flex-wrap gap-2">
               <button
                 onClick={() => handleCleanup(true)}
                 disabled={cleaning}
@@ -358,7 +360,7 @@ export function StoragePanel() {
           <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.
           </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>
             <input
               type="number"
@@ -375,7 +377,7 @@ export function StoragePanel() {
             />
           </div>
 
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2">
             <button
               onClick={() => handleTusCleanup(true)}
               disabled={tusCleaning || tusMaxAgeHours <= 0}
@@ -418,19 +420,21 @@ export function StoragePanel() {
       <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="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>
-            <input
-              type="number"
-              min={1}
-              value={mediaAgeDays}
-              onChange={(e) => { setMediaAgeDays(Number(e.target.value)); setMediaPreviewDone(false); setMediaCleanupResult(null); }}
-              className="input-standard w-20 px-2 py-1 text-sm text-center"
-            />
-            <span className="text-sm text-txt-tertiary">days</span>
+            <div className="flex items-center gap-3">
+              <input
+                type="number"
+                min={1}
+                value={mediaAgeDays}
+                onChange={(e) => { setMediaAgeDays(Number(e.target.value)); setMediaPreviewDone(false); setMediaCleanupResult(null); }}
+                className="input-standard w-20 px-2 py-1 text-sm text-center"
+              />
+              <span className="text-sm text-txt-tertiary">days</span>
+            </div>
           </div>
 
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2">
             <button
               onClick={() => handleMediaCleanup(true)}
               disabled={mediaCleaning || mediaAgeDays < 1}