The progress bars on Insights have stretched, flattened ends #45

New issue

Closed

opened 2026-09-06 15:46:44 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-09-06 15:46:44 +00:00

Owner

Observation

on the insigths i noticied that progress bars have flatten edges, i will prefer round

What is wrong

Each funnel bar in insights.html is an SVG:

<svg viewBox="0 0 100 6" preserveAspectRatio="none" class="h-1.5 w-full">
  <rect x="0" y="0" width="100" height="6" rx="3" …></rect>
  <rect x="0" y="0" width="{{ stage.share }}" height="6" rx="3" …></rect>
</svg>

preserveAspectRatio="none" stretches a 100-unit-wide viewBox across the whole column, so
one horizontal unit becomes several pixels while one vertical unit stays one. The corner
radius is scaled with everything else: rx="3" renders as a wide, shallow ellipse instead
of a semicircle, which reads as a flattened, faintly pointed end. The narrower the bar, the
more obvious it is.

Why it is an SVG at all matters before changing it. Production sets style-src 'self'
with no 'unsafe-inline' (config/settings/prod.py), so style="width: 42%" is refused
by the browser. The width had to come from somewhere the policy allows, and an SVG
attribute was that somewhere.

Shape

Use <progress value="42" max="100">:

the value is an attribute, not a style, so the policy needs no exception;
the element is announced by a screen reader with its value, which the current
aria-label has to do by hand;
the ends round with ordinary CSS — border-radius on the element,
::-webkit-progress-value and ::-moz-progress-bar — uniformly, at any width.

If <progress> proves awkward to style the same way in every browser, the fallback is two
divs and a width taken from a small set of utility classes at five-point steps, safelisted
so Tailwind emits them. A funnel bar does not need one-point fidelity.

Classification

A bug, and a small one. Not breaking.

Depends on

Nothing. #44 must keep the fix rather than rebuilding the stretched SVG.

## Observation > on the insigths i noticied that progress bars have flatten edges, i will prefer round ## What is wrong Each funnel bar in `insights.html` is an SVG: ```html <svg viewBox="0 0 100 6" preserveAspectRatio="none" class="h-1.5 w-full"> <rect x="0" y="0" width="100" height="6" rx="3" …></rect> <rect x="0" y="0" width="{{ stage.share }}" height="6" rx="3" …></rect> </svg> ``` `preserveAspectRatio="none"` stretches a 100-unit-wide viewBox across the whole column, so one horizontal unit becomes several pixels while one vertical unit stays one. The corner radius is scaled with everything else: `rx="3"` renders as a wide, shallow ellipse instead of a semicircle, which reads as a flattened, faintly pointed end. The narrower the bar, the more obvious it is. **Why it is an SVG at all** matters before changing it. Production sets `style-src 'self'` with no `'unsafe-inline'` (`config/settings/prod.py`), so `style="width: 42%"` is refused by the browser. The width had to come from somewhere the policy allows, and an SVG attribute was that somewhere. ## Shape Use `<progress value="42" max="100">`: - the value is an **attribute**, not a style, so the policy needs no exception; - the element is announced by a screen reader with its value, which the current `aria-label` has to do by hand; - the ends round with ordinary CSS — `border-radius` on the element, `::-webkit-progress-value` and `::-moz-progress-bar` — uniformly, at any width. If `<progress>` proves awkward to style the same way in every browser, the fallback is two divs and a width taken from a small set of utility classes at five-point steps, safelisted so Tailwind emits them. A funnel bar does not need one-point fidelity. ## Classification A bug, and a small one. Not breaking. ## Depends on Nothing. #44 must keep the fix rather than rebuilding the stretched SVG.

tiagoagueda added this to the 0.2.0 milestone

2026-09-06 15:46:44 +00:00

tiagoagueda added the

bug

tier/4

interface

labels

2026-09-06 15:46:44 +00:00

tiagoagueda referenced this issue from a commit

2026-09-06 17:03:14 +00:00

Give the funnel bars round ends, with a progress element

tiagoagueda closed this issue