Administrator/Multi-Debrid-Downloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 596 Wiki Activity

Fix dual-layer text: use clip-path inset instead of wrapper for pixel-perfect alignment
Build and Release / build (push) Has been cancelled
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sucukdeluxe
2026-03-02 23:29:28 +01:00
co-authored by Claude Opus 4.6
parent 2d1b6de51a
commit c9bace1e5a
3 changed files with 14 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/App.tsx
+5 -5
View File
@@ -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>