From c9bace1e5a5a0c598d08f4651fd6ffa50b419d67 Mon Sep 17 00:00:00 2001
From: Sucukdeluxe <Sucukdeluxe@users.noreply.github.com>
Date: Mon, 2 Mar 2026 23:29:28 +0100
Subject: [PATCH] Fix dual-layer text: use clip-path inset instead of wrapper
 for pixel-perfect alignment

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

diff --git a/package.json b/package.json
index 8408531..14040ed 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "real-debrid-downloader",
-  "version": "1.5.32",
+  "version": "1.5.33",
   "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 9953f08..27ee1b9 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-clip" style={{ width: `${pct}%` }}><span className="progress-size-text-filled" style={{ width: "160px" }}>{label}</span></span>
+                            <span className="progress-size-text-filled" style={{ clipPath: `inset(0 ${100 - pct}% 0 0)` }}>{label}</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-clip" style={{ width: `${dlProgress}%` }}><span className="progress-inline-text-filled" style={{ width: "70px" }}>{dlProgress}%</span></span>
+              <span className="progress-inline-text-filled" style={{ clipPath: `inset(0 ${100 - dlProgress}% 0 0)` }}>{dlProgress}%</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-clip" style={{ width: `${pct}%` }}><span className="progress-size-text-filled" style={{ width: "160px" }}>{label}</span></span>
+                <span className="progress-size-text-filled" style={{ clipPath: `inset(0 ${100 - pct}% 0 0)` }}>{label}</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-clip" style={{ width: `${item.progressPercent}%` }}><span className="progress-inline-text-filled" style={{ width: "70px" }}>{item.progressPercent}%</span></span>
+                <span className="progress-inline-text-filled" style={{ clipPath: `inset(0 ${100 - (item.progressPercent || 0)}% 0 0)` }}>{item.progressPercent}%</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-clip" style={{ width: `${pct}%` }}><span className="progress-size-text-filled" style={{ width: "160px" }}>{label}</span></span>
+                <span className="progress-size-text-filled" style={{ clipPath: `inset(0 ${100 - pct}% 0 0)` }}>{label}</span>
               </span>
             ) : "-";
           })()}</span>
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index e7ef7d4..e707d57 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -676,25 +676,21 @@ body,
   z-index: 1;
 }
 
-.progress-size-text-clip {
+.progress-size-text-filled {
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
   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;
 }
 
 .progress-size-small {
@@ -702,7 +698,7 @@ body,
 }
 
 .progress-size-small .progress-size-text,
-.progress-size-small .progress-size-text-clip .progress-size-text-filled {
+.progress-size-small .progress-size-text-filled {
   font-size: 9px;
 }
 
@@ -741,24 +737,20 @@ body,
   z-index: 1;
 }
 
-.progress-inline-text-clip {
+.progress-inline-text-filled {
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
   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;
   white-space: nowrap;
+  z-index: 2;
 }
 
 .progress-inline-small {
@@ -766,7 +758,7 @@ body,
 }
 
 .progress-inline-small .progress-inline-text,
-.progress-inline-small .progress-inline-text-clip .progress-inline-text-filled {
+.progress-inline-small .progress-inline-text-filled {
   font-size: 10px;
 }