Skip to content

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

Commit

Costs & margin's spend meters fill again. Each was a div with an inline style width, which sudo's style policy (style-src 'self') blocks, so they always read empty. They are drawn as SVG now, the width an attribute, as sudo's other bars are. Checked: apps/sudo tsc -b.

G1t-Session:
ses_01m5075p3weck8yhgj6kdx5nqb
syntaqxcommitted Parent5d7461bBrowse files
1 file+6−40/1 viewed
+6−4
187187
188188 function CapMeter({ label, used, cap, hint }: { label: string; used: number; cap: number; hint: ReactNode }) {
189189 const percent = capPercent(used, cap);
190− const tone = cap > 0 && used >= cap ? "bg-danger" : percent >= 75 ? "bg-warn" : "bg-accent";
190+ const tone = cap > 0 && used >= cap ? "fill-danger" : percent >= 75 ? "fill-warn" : "fill-accent";
191191 return (
192192 <div className="rounded-md border border-line px-4 py-3">
193193 <div className="flex flex-wrap items-baseline justify-between gap-2">
196196 {usd(used)} <span className="text-faint">of {cap > 0 ? usd(cap) : "no cap"}</span>
197197 </span>
198198 </div>
199− <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-line" role="meter" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(percent)} aria-label={label}>
200− <div className={`h-full ${tone}`} style={{ width: `${percent}%` }} />
201− </div>
199+ {/* Drawn as SVG, its width an attribute: the page's style policy blocks a style attribute. */}
200+ <svg viewBox="0 0 100 4" preserveAspectRatio="none" className="mt-2 block h-1.5 w-full" role="meter" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(percent)} aria-label={label}>
201+ <rect x="0" y="0" width="100" height="4" rx="2" className="fill-line" />
202+ {percent > 0 && <rect x="0" y="0" width={Math.max(2, percent)} height="4" rx="2" className={tone} />}
203+ </svg>
202204 <p className="mt-1.5 text-xs text-muted">{hint}</p>
203205 </div>
204206 );

Comments

Sign in to comment.