diff --git a/frontend/src/components/ui/number-field.tsx b/frontend/src/components/ui/number-field.tsx
index 9412a6a701e..85cc01783b1 100644
--- a/frontend/src/components/ui/number-field.tsx
+++ b/frontend/src/components/ui/number-field.tsx
@@ -7,8 +7,10 @@ import {
   Button,
   type ButtonProps,
   Input as RACInput,
+  useLocale,
 } from "react-aria-components";
 import { cn } from "@/utils/cn";
+import { maxFractionalDigits } from "@/utils/numbers";
 
 export interface NumberFieldProps extends AriaNumberFieldProps {
   placeholder?: string;
@@ -17,12 +19,13 @@ export interface NumberFieldProps extends AriaNumberFieldProps {
 
 export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
   ({ placeholder, variant = "default", ...props }, ref) => {
+    const { locale } = useLocale();
     return (
       <AriaNumberField
         {...props}
         formatOptions={{
           minimumFractionDigits: 0,
-          maximumFractionDigits: 100,
+          maximumFractionDigits: maxFractionalDigits(locale),
         }}
       >
         <div
diff --git a/frontend/src/utils/numbers.ts b/frontend/src/utils/numbers.ts
index 1c2b3986e04..ef5e17719f2 100644
--- a/frontend/src/utils/numbers.ts
+++ b/frontend/src/utils/numbers.ts
@@ -1,5 +1,28 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import { Logger } from "./Logger";
+import { memoizeLastValue } from "./once";
+
+/**
+ * Browsers have a limit on the maximum number of fractional digits they can display.
+ * This function finds the maximum number of fractional digits that can be displayed for a given locale.
+ */
+export const maxFractionalDigits = memoizeLastValue((locale: string) => {
+  const options = [100, 20, 2, 0];
+  for (const option of options) {
+    try {
+      new Intl.NumberFormat(locale, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: option,
+      }).format(1);
+      return option;
+    } catch (e) {
+      Logger.error(e);
+    }
+  }
+  return 0;
+});
+
 export function prettyNumber(value: unknown, locale: string): string {
   if (value === undefined || value === null) {
     return "";
@@ -80,7 +103,7 @@ export function prettyScientificNumber(
   // Don't round
   return value.toLocaleString(locale, {
     minimumFractionDigits: 0,
-    maximumFractionDigits: 100,
+    maximumFractionDigits: maxFractionalDigits(locale),
   });
 }