diff --git a/packages/dreamknob/src/skins/Gauge.tsx b/packages/dreamknob/src/skins/Gauge.tsx index b7444dc..7fa212d 100644 --- a/packages/dreamknob/src/skins/Gauge.tsx +++ b/packages/dreamknob/src/skins/Gauge.tsx @@ -91,8 +91,10 @@ export const Gauge: React.FC = ({ const valueAngle = angleFromNormalized(n, angleOffset, angleRange); const trackPath = describeArc(c, c, r, angleOffset, angleOffset + angleRange); const valuePath = n > 0.001 ? describeArc(c, c, r, angleOffset, valueAngle) : ''; - const tip = polarToCartesian(c, c, r - t * 0.1, valueAngle); - const tail = polarToCartesian(c, c, t * 0.4, valueAngle); + // A short pointer riding the rim — it never crosses the center, so it can't + // cover the digital readout that sits there. + const tip = polarToCartesian(c, c, r + t * 0.15, valueAngle); + const tail = polarToCartesian(c, c, r - t * 1.2, valueAngle); return (
= ({ {valuePath && ( )} - {needle && ( + {needle && n > 0.001 && ( + )} + {needle && n > 0.001 && ( + )} - {needle && } {showValue && (
= ({ position: 'absolute', left: 0, right: 0, - top: needle ? '58%' : '50%', + top: '50%', transform: 'translateY(-50%)', display: 'flex', flexDirection: 'column',