From 158dab60bc841991b41a56618c96b2190ca12b1e Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Fri, 3 Apr 2026 17:33:33 +0200
Subject: [PATCH] Fixed memory allocation desync

---
 src/components/SettingsSection.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/SettingsSection.tsx b/src/components/SettingsSection.tsx
index a24a113..4d935d3 100644
--- a/src/components/SettingsSection.tsx
+++ b/src/components/SettingsSection.tsx
@@ -115,12 +115,22 @@ const SettingsSection: React.FC = () => {
               className="w-full h-2 bg-saturn-border rounded-lg appearance-none cursor-pointer accent-saturn-accent"
             />
 
-            <div className="flex justify-between text-[10px] text-saturn-text-secondary font-bold uppercase tracking-widest">
-              <span>1 GB</span>
-              <span>4 GB</span>
-              <span>8 GB</span>
-              <span>12 GB</span>
-              <span>16 GB</span>
+            <div className="relative w-full mt-2 h-6">
+              {[1024, 4096, 8192, 12288, 16384].map((value) => {
+                const percent =
+                  (((value - 1024) / (16384 - 1024)) * 100 - 50) * 0.97 +
+                  50;
+
+                return (
+                  <span
+                    key={value}
+                    className="absolute text-[10px] text-saturn-text-secondary font-bold uppercase tracking-widest -translate-x-1/2 whitespace-nowrap"
+                    style={{ left: `${percent}%` }}
+                  >
+                    {value / 1024} GB
+                  </span>
+                );
+              })}
             </div>
 
             <div className="p-3 bg-blue-500/5 border border-blue-500/10 rounded-lg flex gap-3">