From f8d5d19a9fcf6133bbcdc9ac2d71ea3c31a6b3ce Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 9 Oct 2025 17:28:20 +0100
Subject: [PATCH] refactor: inline textbox in cache stats display

Move max cache size input inline with stats text: '( X MB / [input] MB used )'
---
 .../Settings/OfflineModeSettings.tsx          | 52 ++++++++-----------
 1 file changed, 23 insertions(+), 29 deletions(-)

diff --git a/src/components/Settings/OfflineModeSettings.tsx b/src/components/Settings/OfflineModeSettings.tsx
index 92a65793..49ae42ed 100644
--- a/src/components/Settings/OfflineModeSettings.tsx
+++ b/src/components/Settings/OfflineModeSettings.tsx
@@ -77,11 +77,15 @@ const OfflineModeSettings: React.FC<OfflineModeSettingsProps> = ({ settings, onU
         </label>
 
         {(settings.enableImageCache ?? true) && (
-          <>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-              <label htmlFor="imageCacheSizeMB" style={{ fontSize: '0.9rem', whiteSpace: 'nowrap' }}>
-                Max (MB):
-              </label>
+          <div style={{ 
+            fontSize: '0.85rem',
+            color: 'var(--text-secondary)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem'
+          }}>
+            <span style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+              ( {cacheStats.totalSizeMB.toFixed(1)} MB / 
               <input
                 id="imageCacheSizeMB"
                 type="number"
@@ -90,36 +94,26 @@ const OfflineModeSettings: React.FC<OfflineModeSettingsProps> = ({ settings, onU
                 value={settings.imageCacheSizeMB ?? 50}
                 onChange={(e) => onUpdate({ imageCacheSizeMB: parseInt(e.target.value) || 50 })}
                 style={{
-                  width: '70px',
-                  padding: '0.25rem 0.5rem',
+                  width: '50px',
+                  padding: '0.15rem 0.35rem',
                   background: 'var(--surface-secondary)',
                   border: '1px solid var(--border-color, #333)',
                   borderRadius: '4px',
                   color: 'var(--text-primary)',
-                  fontSize: '0.9rem'
+                  fontSize: '0.85rem',
+                  textAlign: 'center'
                 }}
               />
-            </div>
-
-            <div style={{ 
-              fontSize: '0.85rem',
-              color: 'var(--text-secondary)',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '0.5rem'
-            }}>
-              <span>
-                ( {cacheStats.totalSizeMB.toFixed(1)} MB / [ {settings.imageCacheSizeMB ?? 50} ] MB used )
-              </span>
-              <IconButton
-                icon={faTrash}
-                onClick={handleClearCache}
-                title="Clear cache"
-                variant="ghost"
-                size={28}
-              />
-            </div>
-          </>
+              MB used )
+            </span>
+            <IconButton
+              icon={faTrash}
+              onClick={handleClearCache}
+              title="Clear cache"
+              variant="ghost"
+              size={28}
+            />
+          </div>
         )}
       </div>