Add min fixed width to counter digits

mui · Feb 25, 2025 · 2002c5f · 2002c5f
1 parent ab39665
commit 2002c5f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/...p/(public)/(content)/react/utils/use-render/demos/class-name/css-modules/index.module.css b/...p/(public)/(content)/react/utils/use-render/demos/class-name/css-modules/index.module.css
@@ -17,6 +17,13 @@
   color: var(--color-gray-900);
   user-select: none;
 
+  & span {
+    font-variant-numeric: tabular-nums;
+    display: inline-block;
+    text-align: end;
+    min-width: 2.5ch;
+  }
+
   @media (hover: hover) {
     &:hover {
       background-color: var(--color-gray-100);

diff --git a/.../src/app/(public)/(content)/react/utils/use-render/demos/class-name/css-modules/index.tsx b/.../src/app/(public)/(content)/react/utils/use-render/demos/class-name/css-modules/index.tsx
@@ -25,7 +25,11 @@ function Counter(props: CounterProps) {
     props: {
       ...otherProps,
       type: 'button',
-      children: `Counter: ${count}`,
+      children: (
+        <React.Fragment>
+          Counter: <span>{count}</span>
+        </React.Fragment>
+      ),
       onClick: () => setCount((prev) => prev + 1),
       'aria-label': `Count is ${count}, click to increase`,
     },

diff --git a/...blic)/(content)/react/utils/use-render/demos/data-attributes/css-modules/index.module.css b/...blic)/(content)/react/utils/use-render/demos/data-attributes/css-modules/index.module.css
@@ -17,6 +17,13 @@
   color: var(--color-gray-900);
   user-select: none;
 
+  & span {
+    font-variant-numeric: tabular-nums;
+    display: inline-block;
+    text-align: end;
+    min-width: 2.5ch;
+  }
+
   @media (hover: hover) {
     &:hover {
       background-color: var(--color-gray-100);

diff --git a/...app/(public)/(content)/react/utils/use-render/demos/data-attributes/css-modules/index.tsx b/...app/(public)/(content)/react/utils/use-render/demos/data-attributes/css-modules/index.tsx
@@ -25,7 +25,11 @@ function Counter(props: CounterProps) {
     props: {
       ...otherProps,
       type: 'button',
-      children: `Counter: ${count}`,
+      children: (
+        <React.Fragment>
+          Counter: <span>{count}</span>
+        </React.Fragment>
+      ),
       onClick: () => setCount((prev) => prev + 1),
       'aria-label': `Count is ${count}, click to increase`,
     },