flet-box 1.0.7 → 1.0.8

package/src/widgets/DraggBox.js

@@ -4,6 +4,7 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
 
 export const DraggBox = (props) => {
   const {
@@ -53,7 +54,7 @@ export const DraggBox = (props) => {
     clone.style.zIndex = "99999";
     clone.style.backgroundColor = dragOverlayColor;
     clone.style.border = `2px dashed ${dragBorderColor}`;
-    clone.style.borderRadius = "8px";
+    clone.style.borderRadius = toREM(8);
     document.body.appendChild(clone);
     return clone;
   };

package/src/widgets/Dropdown.js

@@ -12,6 +12,8 @@ import { Row } from "./Row.js";
 import { Column } from "./Column.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
+import { toREM } from "../utils/units.js";
+import { TAP_MINIMUM } from "../tools/index.js";
 
 /**
  * Props owned by the Dropdown's closure state. Routed to the widget's `update`
@@ -97,10 +99,12 @@ export const Dropdown = (inputProps = {}) => {
   let resizeListener = null;
   let scrollListener = null;
 
+  /** [vertical, horizontal] in framework units — see `Input`: a `"8px 14px"`
+   *  string is raw CSS and stops the field growing with the reader's font. */
   const sizes = {
-    small: { padding: "6px 12px", fontSize: 12 },
-    medium: { padding: "8px 14px", fontSize: 14 },
-    large: { padding: "12px 16px", fontSize: 16 },
+    small: { padding: [4, 12], fontSize: 12, minHeight: 32 },
+    medium: { padding: [8, 12], fontSize: 14, minHeight: TAP_MINIMUM },
+    large: { padding: [12, 16], fontSize: 16, minHeight: 48 },
   };
   let currentSize = sizes[size] || sizes.medium;
 
@@ -197,14 +201,16 @@ export const Dropdown = (inputProps = {}) => {
     alignItems: "center",
     justifyContent: "space-between",
     width: "100%",
-    padding: currentSize.padding,
+    paddingVertical: currentSize.padding[0],
+    paddingHorizontal: currentSize.padding[1],
+    minHeight: currentSize.minHeight,
     backgroundColor:
       currentVariant === "filled" ? `${currentBgColor}CC` : "transparent",
     border:
       currentVariant === "outlined"
         ? `1px solid ${currentError ? colors.danger : colors.border}`
         : "none",
-    borderRadius: `${currentBorderRadius}px`,
+    borderRadius: currentBorderRadius,
     cursor: currentDisabled ? "not-allowed" : "pointer",
     opacity: currentDisabled ? 0.5 : 1,
     boxSizing: "border-box",
@@ -236,11 +242,15 @@ export const Dropdown = (inputProps = {}) => {
     ],
   });
 
-  // Main container
+  // The root must not paint a surface: only the selector does, and an
+  // `outlined` selector is deliberately transparent. Container's default
+  // background otherwise showed through behind the label as a full-width
+  // block, and painted the outlined field as if it were filled.
   const container = Container({
     widgetName: "Dropdown",
     position: "relative",
     width: width,
+    bgColor: "transparent",
     ...rest,
   });
 
@@ -248,9 +258,9 @@ export const Dropdown = (inputProps = {}) => {
     const labelEl = WidgetFactory({
       tag: "label",
       textContent: currentLabel,
-      fontSize: "12px",
+      fontSize: 12,
       color: currentError ? colors.danger : colors.textSecondary,
-      marginBottom: "4px",
+      marginBottom: 4,
       display: "block",
     });
     container.appendChild(labelEl);
@@ -318,7 +328,7 @@ export const Dropdown = (inputProps = {}) => {
       zIndex: 10000,
       border: `1px solid ${colors.border}`,
       backgroundColor: currentBgColor,
-      borderRadius: `${currentBorderRadius}px`, // same borderRadius
+      borderRadius: currentBorderRadius, // same borderRadius
       boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
       maxHeight: "250px",
       overflowY: "auto",
@@ -348,12 +358,14 @@ export const Dropdown = (inputProps = {}) => {
       );
 
       const optionItem = Row({
-        padding: "10px 16px",
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        minHeight: TAP_MINIMUM,
         cursor: "pointer",
         backgroundColor: isSelected ? currentColor + "15" : "transparent",
         alignItems: "center",
         justifyContent: "space-between",
-        gap: "8px",
+        gap: 8,
         children: [
           Row({
             alignItems: "center",
@@ -496,8 +508,9 @@ export const Dropdown = (inputProps = {}) => {
     }
     if (needsDisplayUpdate) {
       updateDisplay();
-      selector.style.padding = currentSize.padding;
-      selector.style.borderRadius = `${currentBorderRadius}px`;
+      selector.style.padding = `${toREM(currentSize.padding[0])} ${toREM(currentSize.padding[1])}`;
+      selector.style.minHeight = toREM(currentSize.minHeight);
+      selector.style.borderRadius = toREM(currentBorderRadius);
       if (currentVariant === "outlined")
         selector.style.border = `1px solid ${currentError ? colors.danger : colors.border}`;
       else selector.style.border = "none";

package/src/widgets/DroppBox.js

@@ -5,6 +5,8 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 
+import { toREM } from "../utils/units.js";
+
 export const DroppBox = (props) => {
   const {
     child,
@@ -58,12 +60,12 @@ export const DroppBox = (props) => {
     transition: `all ${transitionDuration} ${transitionTiming}`,
     backgroundColor: bgColor,
     borderRadius:
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+      toREM(borderRadius),
     borderWidth: `${borderWidth}px`,
     borderStyle: borderStyle,
     borderColor: borderColor,
     boxShadow: shadow,
-    padding: typeof padding === "number" ? `${padding}px` : padding,
+    padding: toREM(padding),
     ...rest,
   });
 

package/src/widgets/FloatingActionButton.js

@@ -7,6 +7,8 @@ import { Row } from "./Row.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
 import { colors } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
+import { SHADOW_LEVELS, PILL } from "../tools/index.js";
 
 export const FloatingActionButton = (props) => {
   const {
@@ -14,9 +16,11 @@ export const FloatingActionButton = (props) => {
     label,
     onPress,
     backgroundColor = colors.primary,
-    foregroundColor = "#ffffff",
-    elevation = 6,
-    borderRadius = 48,
+    foregroundColor = colors.onPrimary,
+    // Depth is the 0-5 scale, like every other widget; 6 was a number the scale
+    // does not have, which only worked because this widget built its own string.
+    elevation = 4,
+    borderRadius = PILL,
     padding = 12,
     mini = false,
     extended = false,
@@ -24,7 +28,9 @@ export const FloatingActionButton = (props) => {
     ...rest
   } = props;
 
-  const size = mini ? 40 : 56;
+  // 48 and 40 are both scale steps, and both clear the Fitts floor: the mini FAB
+  // sits exactly on it, which is as small as a floating target may get.
+  const size = mini ? 40 : 48;
   const iconSize = mini ? 20 : 24;
 
   const children = [
@@ -58,14 +64,14 @@ export const FloatingActionButton = (props) => {
     gap: 8,
     width: extended ? "auto" : size,
     height: size,
-    borderRadius: extended ? "24px" : "50%",
+    borderRadius: extended ? borderRadius : "50%",
     backgroundColor: backgroundColor,
     color: foregroundColor,
     cursor: disabled ? "not-allowed" : "pointer",
     opacity: disabled ? 0.6 : 1,
-    boxShadow: `0 ${elevation / 2}px ${elevation}px rgba(0,0,0,0.3)`,
+    boxShadow: SHADOW_LEVELS[elevation] ?? SHADOW_LEVELS[4],
     transition: "all 0.2s ease",
-    padding: extended ? "0 20px" : 0,
+    padding: extended ? `0 ${toREM(16)}` : 0,
     child: extended
       ? Row({ alignItems: "center", gap: 8, children })
       : children[0],

package/src/widgets/Icon.js

@@ -5,6 +5,8 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 
+import { toREM } from "../utils/units.js";
+
 export const Icon = (props) => {
   const {
     icon,
@@ -20,7 +22,7 @@ export const Icon = (props) => {
     widgetName: "Icon",
     className: "material-icons",
     text: iconName, // ✅ CHANGED: text instead of textContent
-    fontSize: typeof size === "number" ? `${size}px` : size,
+    fontSize: toREM(size),
     color: color,
     display: "inline-flex",
     alignItems: "center",

package/src/widgets/Input.js

@@ -4,6 +4,8 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
+import { TAP_MINIMUM } from "../tools/index.js";
 import { Icon } from "./Icon.js";
 import { TextInputValidator } from "../utils/TextInputValidator.js";
 import { composeUpdate } from "../utils/composeUpdate.js";
@@ -76,7 +78,7 @@ export const Input = (props) => {
     size = "medium",
     variant = "outlined",
     fullWidth = false,
-    borderRadius = 24,
+    borderRadius = 16,
 
     iconLeft,
     iconRight,
@@ -131,11 +133,17 @@ export const Input = (props) => {
   const isFocused = () => document.activeElement === inputElement;
 
   // ========== SIZES ==========
-  // Maps the `size` prop to concrete CSS values so the rest of the code stays size-agnostic.
+  /**
+   * Framework units, not CSS strings: this widget builds a real `<input>` and
+   * writes `style.*` by hand, so every length here goes through `toREM` at the
+   * point of use. Written as `"10px 14px"` the field froze at 16px base and the
+   * reader who raises their font got small text inside a control that should have
+   * grown with it. `minHeight` is the Fitts floor — a text field is a target.
+   */
   const sizes = {
-    small: { padding: "6px 12px", fontSize: "12px", iconSize: 16 },
-    medium: { padding: "10px 14px", fontSize: "14px", iconSize: 20 },
-    large: { padding: "14px 18px", fontSize: "16px", iconSize: 24 },
+    small: { padding: [4, 12], fontSize: 12, iconSize: 16, minHeight: 32 },
+    medium: { padding: [8, 12], fontSize: 14, iconSize: 20, minHeight: TAP_MINIMUM },
+    large: { padding: [12, 16], fontSize: 16, iconSize: 24, minHeight: 48 },
   };
   const sz = sizes[size] || sizes.medium;
 
@@ -350,7 +358,7 @@ export const Input = (props) => {
       fontSize: 12,
       fontWeight: 500,
       color: error ? colors.danger : colors.textSecondary,
-      marginBottom: 2,
+      marginBottom: 4,
       cursor: "text",
     });
     // Clicking the label focuses the native input — mirrors native <label for> behavior
@@ -387,8 +395,7 @@ export const Input = (props) => {
 
   if (variant === "filled") {
     wrapperStyles.backgroundColor = colors.gray100;
-    wrapperStyles.borderRadius =
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+    wrapperStyles.borderRadius = toREM(borderRadius);
     wrapperStyles.border = "none";
   } else if (variant === "underlined") {
     wrapperStyles.backgroundColor = "transparent";
@@ -397,8 +404,7 @@ export const Input = (props) => {
   } else {
     // Default: outlined
     wrapperStyles.backgroundColor = "transparent";
-    wrapperStyles.borderRadius =
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+    wrapperStyles.borderRadius = toREM(borderRadius);
     wrapperStyles.border = `1px solid ${error ? colors.danger : colors.border}`;
   }
 
@@ -414,7 +420,7 @@ export const Input = (props) => {
       name: iconLeft,
       size: iconSize || sz.iconSize,
       color: iconColor,
-      marginLeft: "12px",
+      marginLeft: 12,
       flexShrink: 0,
       pointerEvents: "auto",
     });
@@ -436,8 +442,9 @@ export const Input = (props) => {
   inputElement.value = currentValue;
 
   inputElement.style.flex = "1";
-  inputElement.style.padding = sz.padding;
-  inputElement.style.fontSize = sz.fontSize;
+  inputElement.style.padding = `${toREM(sz.padding[0])} ${toREM(sz.padding[1])}`;
+  inputElement.style.fontSize = toREM(sz.fontSize);
+  inputElement.style.minHeight = toREM(sz.minHeight);
   inputElement.style.border = "none";
   inputElement.style.outline = "none";
   inputElement.style.backgroundColor = "transparent";
@@ -505,15 +512,15 @@ export const Input = (props) => {
     btn.type = "button";
     btn.textContent = glyph;
     btn.setAttribute("aria-label", label);
-    btn.style.width = "28px";
-    btn.style.height = "28px";
+    btn.style.width = toREM(32);
+    btn.style.height = toREM(32);
     btn.style.flexShrink = "0";
-    btn.style.marginRight = "6px";
+    btn.style.marginRight = toREM(4);
     btn.style.padding = "0";
     btn.style.border = "none";
     btn.style.background = "transparent";
     btn.style.color = colors.textSecondary;
-    btn.style.fontSize = "15px";
+    btn.style.fontSize = toREM(16);
     btn.style.lineHeight = "1";
     btn.style.cursor = disabled ? "not-allowed" : "pointer";
     btn.style.display = "flex";
@@ -564,12 +571,12 @@ export const Input = (props) => {
   if (showValidationIcon && validation !== "none") {
     validationIcon = document.createElement("span");
     validationIcon.textContent = "";
-    validationIcon.style.width = "24px";
-    validationIcon.style.fontSize = "16px";
+    validationIcon.style.width = toREM(24);
+    validationIcon.style.fontSize = toREM(16);
     validationIcon.style.display = "none";
     validationIcon.style.alignItems = "center";
     validationIcon.style.justifyContent = "center";
-    validationIcon.style.marginRight = "8px";
+    validationIcon.style.marginRight = toREM(8);
     validationIcon.style.flexShrink = "0";
     inputWrapper.appendChild(validationIcon);
   }
@@ -580,7 +587,7 @@ export const Input = (props) => {
       name: iconRight,
       size: iconSize || sz.iconSize,
       color: iconColor,
-      marginRight: "12px",
+      marginRight: 12,
       flexShrink: 0,
       pointerEvents: "auto",
     });
@@ -593,9 +600,9 @@ export const Input = (props) => {
   // --- Error message element rendered below the input ---
   errorMessageElement = document.createElement("span");
   errorMessageElement.textContent = "";
-  errorMessageElement.style.fontSize = "11px";
+  errorMessageElement.style.fontSize = toREM(12);
   errorMessageElement.style.color = colors.danger;
-  errorMessageElement.style.marginTop = "2px";
+  errorMessageElement.style.marginTop = toREM(4);
   errorMessageElement.style.display = "none";
   container.appendChild(errorMessageElement);
 

package/src/widgets/Inspector.js

@@ -1,5 +1,7 @@
 // utils/Inspector.js
 import { getWidgetProps } from "../utils/getWidgetProps.js";
+import { WidgetFactory } from "../widget-factory/index.js";
+import { colors } from "../utils/themes.js";
 
 /**
  * Converts a JavaScript value to its source-code string representation.
@@ -138,6 +140,44 @@ const collectChildren = (widget) => {
   return children;
 };
 
+/**
+ * The widget form: a monospace block holding the reconstructed call.
+ *
+ * `Inspector` itself is a string builder, which is what the console helpers
+ * need. A screen that wants to *show* a tree asks for this one, by passing the
+ * props object the documentation describes.
+ *
+ * @param {{ widget?: HTMLElement, indent?: number }} props
+ * @returns {HTMLElement}
+ */
+const InspectorView = ({ widget, indent = 0, ...rest }) => {
+  const dump = widget
+    ? Inspector(widget, indent)
+    : 'Inspector({ widget }) — nothing to inspect.';
+
+  const container = WidgetFactory({
+    widgetName: "Inspector",
+    tag: "pre",
+    text: dump,
+    fontFamily:
+      'ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace',
+    fontSize: 12,
+    color: colors.text,
+    backgroundColor: colors.card,
+    padding: 16,
+    borderRadius: 8,
+    overflowX: "auto",
+    width: "100%",
+    ...rest,
+  });
+
+  // A <pre> that wraps is a dump nobody can read; the horizontal scroll above
+  // is the deal.
+  container.style.whiteSpace = "pre";
+
+  return container;
+};
+
 /**
  * Converts a widget element back into its equivalent source-code representation,
  * recursively reconstructing its full prop tree and children.
@@ -149,7 +189,20 @@ const collectChildren = (widget) => {
  * @param {number} [indent=0] - Starting indentation depth for pretty-printing.
  * @returns {string} Source code string such as `Row({ gap: 8, children: [...] })`.
  */
-export const Inspector = (widget, indent = 0) => {
+export const Inspector = (target, indent = 0) => {
+  // Two calls, one function. `Inspector({ widget, indent })` is the documented
+  // widget: it paints the dump so a settings screen can show a tree. Called
+  // with a node it stays the string builder `printWidgetCode` uses.
+  if (
+    target &&
+    typeof target === "object" &&
+    target.nodeType !== 1 &&
+    "widget" in target
+  ) {
+    return InspectorView(target);
+  }
+
+  const widget = target;
   if (!widget || widget.nodeType !== 1) {
     return String(widget);
   }

package/src/widgets/InstallButton.js

@@ -10,9 +10,11 @@ export const InstallButton = (props) => {
     text = "📲 Install",
     variant = "filled",
     size = "medium",
-    borderRadius = 28,
-    padding = "12px 24px",
-    bottom = 20,
+    borderRadius = 16,
+    // A number is the framework's own form: Button doubles it horizontally
+    // (12 vertical, 24 horizontal) and the factory emits it as `rem`.
+    padding = 12,
+    bottom = 24,
     backgroundColor,
     color,
     onInstalled,
@@ -64,7 +66,7 @@ export const InstallButton = (props) => {
     borderRadius: borderRadius,
     padding: padding,
     position: "fixed",
-    bottom: `${bottom}px`,
+    bottom,
     left: "50%",
     transform: "translateX(-50%)",
     zIndex: 10000,

package/src/widgets/ListTile.js

@@ -7,6 +7,7 @@ import { Row } from "./Row.js";
 import { Column } from "./Column.js";
 import { Text } from "./Text.js";
 import { colors, subscribeTheme } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
 
 /**
  * @typedef {Object} ListTileProps
@@ -132,7 +133,7 @@ export const ListTile = (props) => {
   const contentRow = Row({
     alignItems: "center",
     gap: gap,
-    padding: `${paddingVertical}px ${paddingHorizontal}px`,
+    padding: `${toREM(paddingVertical)} ${toREM(paddingHorizontal)}`,
     width: "100%",
     boxSizing: "border-box",
     children: rowChildren,
@@ -199,8 +200,8 @@ export const ListTile = (props) => {
     const dividerLine = WidgetFactory({
       height: 1,
       backgroundColor: colors.border,
-      marginLeft: `${paddingHorizontal}px`,
-      width: `calc(100% - ${paddingHorizontal}px)`,
+      marginLeft: toREM(paddingHorizontal),
+      width: `calc(100% - ${toREM(paddingHorizontal)})`,
     });
 
     const container = WidgetFactory({

package/src/widgets/ListView.js

@@ -4,6 +4,7 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { injectKeyframes } from "../utils/styleInjector.js";
+import { toREM, getBaseFontSize } from "../utils/units.js";
 
 /**
  * @typedef {Object} ListViewProps
@@ -11,8 +12,8 @@ import { injectKeyframes } from "../utils/styleInjector.js";
  * @property {Function} renderItem - Called with `(item, index)` and must return an `HTMLElement`.
  * @property {number|string} [height=400] - Height of the scroll container. Overridden when `expand` is true.
  * @property {number|string} [width="100%"] - Width of the widget.
- * @property {number} [itemSize=60] - Fixed height of each row in pixels (required for virtualization math).
- * @property {number} [gap=0] - Vertical gap between rows in pixels.
+ * @property {number} [itemSize=60] - Fixed height of each row in framework units, i.e. it grows with the base font (required for virtualization math).
+ * @property {number} [gap=0] - Vertical gap between rows in framework units.
  * @property {number} [bufferSize=5] - Number of extra rows to render above and below the visible viewport.
  *   Larger values reduce the chance of blank flashes during fast scrolling at the cost of more DOM nodes.
  * @property {boolean} [showsScrollIndicator=true] - Whether to show the native scrollbar.
@@ -140,6 +141,23 @@ export const ListView = (props) => {
 
   // ---- Helper functions ----
 
+  /**
+   * Rendered pixels per framework unit, read from the live root font size.
+   *
+   * `itemSize` and `gap` are framework units, so the row they reserve grows with
+   * the reader's font like every other box. The virtualisation math compares
+   * against `scrollTop` and `clientHeight`, which are always CSS pixels, so the
+   * two spaces have to be joined here: a 60-unit row is 90px of scroll space for
+   * a reader on a 24px base, and rows written straight from the unit overlap.
+   */
+  const unitPx = () => {
+    if (typeof document === "undefined") return 1;
+    const root = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return root > 0 ? root / getBaseFontSize() : 1;
+  };
+  const slotHeight = () => (itemSize + gap) * unitPx();
+  const gapHeight = () => gap * unitPx();
+
   /** @returns {number} Total number of rows (accounting for grid columns). */
   const getTotalRows = () => Math.ceil(_data.length / cols);
 
@@ -159,7 +177,7 @@ export const ListView = (props) => {
    */
   const getItemTop = (index) => {
     const row = Math.floor(index / cols);
-    return row * (itemSize + gap);
+    return row * slotHeight();
   };
 
   /**
@@ -171,7 +189,7 @@ export const ListView = (props) => {
   const getTotalHeight = () => {
     const rows = getTotalRows();
     if (rows === 0) return 0;
-    return Math.max(0, rows * (itemSize + gap) - gap);
+    return Math.max(0, rows * slotHeight() - gapHeight());
   };
 
   /** Applies the correct logical height to the inner container. */
@@ -190,7 +208,7 @@ export const ListView = (props) => {
     if (!scrollContainer) return;
 
     const viewportH = scrollContainer.clientHeight;
-    const itemTotalH = itemSize + gap;
+    const itemTotalH = slotHeight();
     // Convert the scroll position into ITEM space: rows start below the header, so
     // the first rows are still on screen while `scrollTop` is inside the header.
     const itemsTop = Math.max(0, scrollContainer.scrollTop - getHeaderHeight());
@@ -228,7 +246,7 @@ export const ListView = (props) => {
           console.error("Error in renderItem:", err);
           itemEl = document.createElement("div");
           itemEl.textContent = "Error";
-          itemEl.style.padding = "8px";
+          itemEl.style.padding = toREM(8);
         }
       }
       if (!itemEl) continue;
@@ -240,12 +258,12 @@ export const ListView = (props) => {
         const col = i % cols;
         wrapper.style.left = `${(col / cols) * 100}%`;
         wrapper.style.width = `${100 / cols}%`;
-        wrapper.style.padding = `0 ${gap / 2}px`;
+        wrapper.style.padding = `0 ${toREM(gap / 2)}`;
         wrapper.style.boxSizing = "border-box";
       } else {
         wrapper.style.left = "0";
         wrapper.style.right = "0";
-        wrapper.style.padding = `0 ${gap}px`;
+        wrapper.style.padding = `0 ${toREM(gap)}`;
       }
       wrapper.appendChild(itemEl);
       fragment.appendChild(wrapper);
@@ -367,8 +385,8 @@ export const ListView = (props) => {
     refreshIndicator.style.transition = "height 0.2s";
 
     const spinner = document.createElement("div");
-    spinner.style.width = "24px";
-    spinner.style.height = "24px";
+    spinner.style.width = toREM(24);
+    spinner.style.height = toREM(24);
     spinner.style.border = "2px solid #e0e0e0";
     spinner.style.borderTop = "2px solid #007aff";
     spinner.style.borderRadius = "50%";
@@ -401,7 +419,7 @@ export const ListView = (props) => {
         if (h >= 60) {
           // Threshold met — trigger the refresh
           _refreshing = true;
-          refreshIndicator.style.height = "60px";
+          refreshIndicator.style.height = toREM(60);
           onRefresh(() => {
             _refreshing = false;
             refreshIndicator.style.height = "0";
@@ -498,7 +516,7 @@ export const ListView = (props) => {
     set: (val) => {
       _refreshing = val;
       if (refreshIndicator)
-        refreshIndicator.style.height = _refreshing ? "60px" : "0";
+        refreshIndicator.style.height = _refreshing ? toREM(60) : "0";
     },
     enumerable: true,
   });