Administrator/real-debrid-downloader
1
0
Fork 0
Code Issues Pull Requests Actions 132 Packages Projects Releases 238 Wiki Activity

Fix dual-layer text alignment: use clip wrapper for proper text centering
Some checks are pending
Build and Release / build (push) Waiting to run
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sucukdeluxe 2026-03-02 23:25:59 +01:00
parent c07c0fbdf7
commit 2d1b6de51a
3 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

10
src/renderer/App.tsx
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-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>

25
src/renderer/styles.css
View File

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