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

@@ -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",

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>

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;
 }