peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(theme): R10 S2 — re-close the rem system (px-frozen labels/chrome -> rem)

Browse Source 
The ~124 px-frozen text-[Npx] labels didn't track the Settings font-scale slider
while their rem-sized neighbours did. Add text-2xs (0.6875rem) / text-3xs
(0.625rem) font-size-ONLY tokens (no paired line-height -> matches the arbitrary
they replace, zero vertical-rhythm shift) and codemod every text-[Npx] to a rem
class (rare 8/9/12/13px -> rem arbitraries).

Also: --hdr-h 68px -> 4.25rem so header content clears the rem-sized pills at
scale 1.3 instead of sliding under; NavSidebar/SidePanel slot widths + their
icon/badge px sizes go rem so the rails keep pace with their (now-scaling)
labels; a w-24/h-[54px] thumb -> h-13.5 to preserve 16:9 at scale. Media
thumbnails, page-width caps and fixed container widths deliberately stay px.

Verified via getComputedStyle at scale 1.06/1.3: text-2xs 11.66->14.3px, header
clearance 72->88px, nav slot 246->302px — all scale proportionally.
This commit is contained in:
peter
2026-08-09 03:18:04 +02:00
parent 5e1abaaf8c
commit ab873bbcaa
37 changed files with 144 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Scheduler.tsx
+8 -8
View File
@@ -75,7 +75,7 @@ function StatusDot({
function StatusLegend() {
const { t } = useTranslation();
return (
<div className="flex items-center gap-x-3 gap-y-1 flex-wrap text-[11px] text-muted mb-2">
<div className="flex items-center gap-x-3 gap-y-1 flex-wrap text-2xs text-muted mb-2">
{(["running", "ok", "idle", "error", "skipped"] as const).map((k) => (
<span key={k} className="inline-flex items-center gap-1.5">
<StatusDot k={k} withTooltip={false} />
@@ -97,7 +97,7 @@ function JobProgress({ p }: { p: SchedulerJob["progress"] }) {
p?.total && p.total > 0 ? Math.min(100, Math.round((p.current / p.total) * 100)) : null;
return (
<div className="mt-1.5">
<div className="flex items-center justify-between text-[11px] text-muted mb-0.5">
<div className="flex items-center justify-between text-2xs text-muted mb-0.5">
<span className="truncate">{phase}</span>
<span className="tabular-nums shrink-0">
{p?.total != null
@@ -203,7 +203,7 @@ function JobRow({
</Tooltip>
)}
</div>
<div className="text-[11px] text-muted truncate">
<div className="text-2xs text-muted truncate">
{job.running
? t("scheduler.runningNow")
: job.last_finished
@@ -217,12 +217,12 @@ function JobRow({
</div>
{job.running && <JobProgress p={job.progress} />}
</div>
<div className="shrink-0 text-right text-[11px] text-muted tabular-nums">
<div className="shrink-0 text-right text-2xs text-muted tabular-nums">
{job.running ? (
<span className="text-accent">{t("scheduler.active")}</span>
) : next != null ? (
<>
<div className="uppercase tracking-wide text-[10px]">{t("scheduler.nextRun")}</div>
<div className="uppercase tracking-wide text-3xs">{t("scheduler.nextRun")}</div>
<div>{fmtCountdown(next)}</div>
</>
) : (
@@ -291,7 +291,7 @@ function MaintenanceSettings({
{t("common.save")}
</button>
</div>
<div className="text-[11px] text-muted mt-1.5">
<div className="text-2xs text-muted mt-1.5">
{t("scheduler.maintenance.batchNote", {
default: m.revalidate_batch_default.toLocaleString(),
})}
@@ -330,7 +330,7 @@ function Stat({
</Tooltip>
</div>
<div className="text-xl font-semibold mt-1 tabular-nums">{value}</div>
{sub && <div className="text-[11px] text-muted">{sub}</div>}
{sub && <div className="text-2xs text-muted">{sub}</div>}
</div>
);
}
@@ -595,7 +595,7 @@ export default function Scheduler() {
style={{ width: `${quotaPct}%` }}
/>
</div>
<div className="text-[11px] text-muted mt-1.5">{t("scheduler.quotaNote")}</div>
<div className="text-2xs text-muted mt-1.5">{t("scheduler.quotaNote")}</div>
</div>
</div>