From 2d1b6de51aa2b7d5cf69003d172cc3fda0970090 Mon Sep 17 00:00:00 2001
From: Sucukdeluxe <Sucukdeluxe@users.noreply.github.com>
Date: Mon, 2 Mar 2026 23:25:59 +0100
Subject: [PATCH] Fix dual-layer text alignment: use clip wrapper for proper
 text centering

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package.json            |  2 +-
 src/renderer/App.tsx    | 10 +++++-----
 src/renderer/styles.css | 25 +++++++++++++++++--------
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index b4ac694..8408531 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "real-debrid-downloader",
-  "version": "1.5.31",
+  "version": "1.5.32",
   "description": "Real-Debrid Downloader Desktop (Electron + React + TypeScript)",
   "main": "build/main/main/main.js",
   "author": "Sucukdeluxe",
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index fee5211..9953f08 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -2185,7 +2185,7 @@ export function App(): ReactElement {
                           <span className="progress-size">
                             <span className="progress-size-bar" style={{ width: `${pct}%` }} />
                             <span className="progress-size-text">{label}</span>
-                            <span className="progress-size-text-filled" style={{ width: `${pct}%` }}><span style={{ width: "160px", textAlign: "center", flexShrink: 0 }}>{label}</span></span>
+                            <span className="progress-size-text-clip" style={{ width: `${pct}%` }}><span className="progress-size-text-filled" style={{ width: "160px" }}>{label}</span></span>
                           </span>
                         ) : "-";
                       })()}</span>
@@ -2812,7 +2812,7 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
             <span className="progress-inline">
               <span className="progress-inline-bar" style={{ width: `${dlProgress}%` }} />
               <span className="progress-inline-text">{dlProgress}%</span>
-              <span className="progress-inline-text-filled" style={{ width: `${dlProgress}%` }}><span style={{ width: "70px", textAlign: "center", flexShrink: 0 }}>{dlProgress}%</span></span>
+              <span className="progress-inline-text-clip" style={{ width: `${dlProgress}%` }}><span className="progress-inline-text-filled" style={{ width: "70px" }}>{dlProgress}%</span></span>
             </span>
           </span>
           <span className="pkg-col pkg-col-size">{(() => {
@@ -2824,7 +2824,7 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
               <span className="progress-size">
                 <span className="progress-size-bar" style={{ width: `${pct}%` }} />
                 <span className="progress-size-text">{label}</span>
-                <span className="progress-size-text-filled" style={{ width: `${pct}%` }}><span style={{ width: "160px", textAlign: "center", flexShrink: 0 }}>{label}</span></span>
+                <span className="progress-size-text-clip" style={{ width: `${pct}%` }}><span className="progress-size-text-filled" style={{ width: "160px" }}>{label}</span></span>
               </span>
             ) : "-";
           })()}</span>
@@ -2854,7 +2854,7 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
               <span className="progress-inline progress-inline-small">
                 <span className="progress-inline-bar" style={{ width: `${item.progressPercent}%` }} />
                 <span className="progress-inline-text">{item.progressPercent}%</span>
-                <span className="progress-inline-text-filled" style={{ width: `${item.progressPercent}%` }}><span style={{ width: "70px", textAlign: "center", flexShrink: 0 }}>{item.progressPercent}%</span></span>
+                <span className="progress-inline-text-clip" style={{ width: `${item.progressPercent}%` }}><span className="progress-inline-text-filled" style={{ width: "70px" }}>{item.progressPercent}%</span></span>
               </span>
             ) : "-"}
           </span>
@@ -2867,7 +2867,7 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs
               <span className="progress-size progress-size-small">
                 <span className="progress-size-bar" style={{ width: `${pct}%` }} />
                 <span className="progress-size-text">{label}</span>
-                <span className="progress-size-text-filled" style={{ width: `${pct}%` }}><span style={{ width: "160px", textAlign: "center", flexShrink: 0 }}>{label}</span></span>
+                <span className="progress-size-text-clip" style={{ width: `${pct}%` }}><span className="progress-size-text-filled" style={{ width: "160px" }}>{label}</span></span>
               </span>
             ) : "-";
           })()}</span>
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index d44b8fe..e7ef7d4 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -676,21 +676,25 @@ body,
   z-index: 1;
 }
 
-.progress-size-text-filled {
+.progress-size-text-clip {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.progress-size-text-clip .progress-size-text-filled {
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
   font-size: 10px;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   color: #0a0f1a;
   white-space: nowrap;
-  z-index: 2;
-  overflow: hidden;
 }
 
 .progress-size-small {
@@ -698,7 +702,7 @@ body,
 }
 
 .progress-size-small .progress-size-text,
-.progress-size-small .progress-size-text-filled {
+.progress-size-small .progress-size-text-clip .progress-size-text-filled {
   font-size: 9px;
 }
 
@@ -737,19 +741,24 @@ body,
   z-index: 1;
 }
 
-.progress-inline-text-filled {
+.progress-inline-text-clip {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.progress-inline-text-clip .progress-inline-text-filled {
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
   font-size: 11px;
   font-weight: 700;
   color: #0a0f1a;
-  z-index: 2;
-  overflow: hidden;
+  white-space: nowrap;
 }
 
 .progress-inline-small {
@@ -757,7 +766,7 @@ body,
 }
 
 .progress-inline-small .progress-inline-text,
-.progress-inline-small .progress-inline-text-filled {
+.progress-inline-small .progress-inline-text-clip .progress-inline-text-filled {
   font-size: 10px;
 }