Monospace request count numbers to avoid layout flickering

pimterry · pimterry · commit c37a64daf0d0 · 2025-04-07T19:09:28.000+02:00
Unfortunately DM Sans doesn't support tabular numbers itself, but using
DM Mono looks just as good imo and neatly solves the problem, so numbers
tick upwards cleanly.
diff --git a/src/components/view/view-event-list-footer.tsx b/src/components/view/view-event-list-footer.tsx
@@ -41,6 +41,9 @@ const RequestCounter = styled(observer((props: {
         font-size: 20px;
         font-weight: bold;
         white-space: nowrap;
+
+        font-variant-numeric: tabular-nums;
+        font-family: ${p => p.theme.monoFontFamily}
     }
 
     .label {

Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,9 @@ const RequestCounter = styled(observer((props: {`
`41`	`41`	`font-size: 20px;`
`42`	`42`	`font-weight: bold;`
`43`	`43`	`white-space: nowrap;`
	`44`	`+`
	`45`	`+ font-variant-numeric: tabular-nums;`
	`46`	`+ font-family: ${p => p.theme.monoFontFamily}`
`44`	`47`	`}`
`45`	`48`
`46`	`49`	`.label {`