@xh/hoist 86.0.1 → 86.2.0

package/docs/error-handling.md

@@ -490,6 +490,15 @@ The logged payload includes:
 - Whether the user was shown an alert
 - An optional user-provided message (via the "Report" dialog)
 
+> **Routing client errors to a chat system:** Because reported errors land server-side as
+> `'Client Error'` track entries, a Grails service can forward them to a realtime chat system
+> (Slack, Teams, etc.) by subscribing to the `xhTrackReceived` cluster topic - no client changes
+> required. XH's [Toolbox](https://github.com/xh/toolbox) demo app
+> [includes a `SlackAlertService` that does exactly this](https://github.com/xh/toolbox/blob/develop/grails-app/services/io/xh/toolbox/SlackAlertService.groovy),
+> posting client errors (alongside monitor alerts and user feedback) to Slack. See the hoist-core
+> [activity tracking](https://github.com/xh/hoist-core/blob/develop/docs/activity-tracking.md) docs
+> for the server-side topic mechanism.
+
 ### Sensitive Data Redaction
 
 The handler automatically redacts values at paths listed in

package/format/FormatNumber.ts

@@ -14,6 +14,7 @@ import {
     isNil,
     isNumber,
     isString,
+    isUndefined,
     round
 } from 'lodash';
 import Numbro from 'numbro';
@@ -78,8 +79,9 @@ export interface NumberFormatOptions extends Omit<FormatOptions<number>, 'toolti
     omitFourDigitComma?: boolean;
 
     /**
-     * Desired number of decimal places, or 'auto' (default) to adjust the displayed precision
-     * automatically based on the scale of the value.
+     * Desired number of decimal places, 'auto' (default) to adjust the displayed precision
+     * automatically based on the scale of the value, or null for full, unrestricted precision
+     * (capped at the max supported precision, with trailing zeros trimmed).
      */
     precision?: Precision;
 
@@ -118,15 +120,23 @@ export interface NumberFormatOptions extends Omit<FormatOptions<number>, 'toolti
      *
      * e.g. `{precision:4, zeroPad:2}` will format `1.2` → "1.20" and `1.234` → "1.234"
      *
-     * Default is true if a fixed precision is set, false if precision is 'auto'.
+     * Default is true if a fixed precision is set, false if precision is 'auto' or null (full).
      */
     zeroPad?: ZeroPad;
 }
 
 export interface QuantityFormatOptions extends NumberFormatOptions {
+    /** True to compact values \>= 1 million into units of millions (m). Default true. */
     useMillions?: boolean;
 
+    /** True to compact values \>= 1 billion into units of billions (b). Default true. */
     useBillions?: boolean;
+
+    /**
+     * True to compact to m/b units only when no precision is lost, else render the full value.
+     * Default false.
+     */
+    lossless?: boolean;
 }
 
 /** Config for pos/neg/neutral color classes. */
@@ -175,9 +185,16 @@ export function fmtNumber(v: number, opts?: NumberFormatOptions): ReactNode {
     } = opts ?? ({} as NumberFormatOptions);
     if (isInvalidInput(v)) return nullDisplay;
 
-    // Ensure any non-int precision is treated as 'auto', use to default zeroPad.
-    if (!isInteger(precision)) precision = 'auto';
-    if (isNil(zeroPad)) zeroPad = precision != 'auto';
+    // Resolve precision: null means full precision, other non-integers (e.g. undefined) mean 'auto'.
+    const fullPrecision = precision === null;
+    if (fullPrecision) {
+        precision = MAX_NUMERIC_PRECISION;
+    } else if (!isInteger(precision)) {
+        precision = 'auto';
+    }
+
+    // Default zeroPad to pad only for a fixed precision - 'auto' and full precision trim zeros.
+    if (isNil(zeroPad)) zeroPad = precision != 'auto' && !fullPrecision;
 
     formatConfig =
         formatConfig || buildFormatConfig(v, precision, zeroPad, withCommas, omitFourDigitComma);
@@ -271,20 +288,40 @@ export function fmtQuantity(v: number, opts?: QuantityFormatOptions) {
     saveOriginal(v, opts);
     if (isInvalidInput(v)) return fmtNumber(v, opts);
 
-    const lessThanM = Math.abs(v) < MILLION,
-        lessThanB = Math.abs(v) < BILLION;
-
     defaults(opts, {
         ledger: true,
         label: true,
-        precision: lessThanM ? 0 : 2,
         useMillions: true,
-        useBillions: true
+        useBillions: true,
+        lossless: false
     });
 
-    if (lessThanM || !opts.useMillions) return fmtNumber(v, opts);
-    if (lessThanB || !opts.useBillions) return fmtMillions(v, opts);
-    return fmtBillions(v, opts);
+    const absV = Math.abs(v),
+        lessM = absV < MILLION,
+        lessB = absV < BILLION,
+        targetPrecision = opts.precision ?? (lessM ? 0 : 2);
+
+    // Compute scaling, if any (Lossless flag may preclude).
+    let scale = !lessB && opts.useBillions ? BILLION : !lessM && opts.useMillions ? MILLION : null;
+    if (scale && opts.lossless) {
+        const precision = parsePrecision(absV / scale, targetPrecision),
+            lossy = v % (scale / 10 ** precision) !== 0;
+        if (lossy) scale = null;
+    }
+
+    // Resolve render precision (unless the caller set one).
+    if (isUndefined(opts.precision)) {
+        opts.precision = opts.lossless ? null : targetPrecision;
+    }
+
+    switch (scale) {
+        case BILLION:
+            return fmtBillions(v, opts);
+        case MILLION:
+            return fmtMillions(v, opts);
+        default:
+            return fmtNumber(v, opts);
+    }
 }
 
 /**
@@ -462,6 +499,23 @@ function calcStyleFromColorSpec(v: number, colorSpec: ColorSpec | boolean): CSSP
     return !isString(possibleStyles) ? possibleStyles : {};
 }
 
+/**
+ * Resolve a precisionSpec to a concrete number of decimal places. A fixed precision is used as-is
+ * (capped at max), while 'auto' is derived from the scale of the value.
+ */
+function parsePrecision(v: number, precisionSpec: Precision): number {
+    // Fixed precision - use requested, capped at max.
+    if (precisionSpec !== 'auto') return Math.min(precisionSpec, MAX_NUMERIC_PRECISION);
+
+    // 'auto' - derive from the scale of the value.
+    const absVal = Math.abs(v);
+    if (absVal === 0) return 2;
+    if (absVal < 0.01) return 6;
+    if (absVal < 100) return 4;
+    if (absVal < 10000) return 2;
+    return 0;
+}
+
 function buildFormatConfig(
     v: number,
     precisionSpec: Precision,
@@ -472,24 +526,7 @@ function buildFormatConfig(
     const absVal = Math.abs(v),
         config: Numbro.Format = {};
 
-    let precision: number;
-    if (precisionSpec === 'auto') {
-        // Auto-precision - base on scale of number
-        if (absVal === 0) {
-            precision = 2;
-        } else if (absVal < 0.01) {
-            precision = 6;
-        } else if (absVal < 100) {
-            precision = 4;
-        } else if (absVal < 10000) {
-            precision = 2;
-        } else {
-            precision = 0;
-        }
-    } else {
-        // Fixed precision - use requested, capped at max.
-        precision = precisionSpec < MAX_NUMERIC_PRECISION ? precisionSpec : MAX_NUMERIC_PRECISION;
-    }
+    const precision = parsePrecision(v, precisionSpec);
 
     // If zeroPad gte precision, treat as `true` to pad out to (but not beyond) full precision.
     // We don't support applying some precision (rounding) then padding out zeroes after that.

package/icon/Icon.scss

@@ -0,0 +1,13 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+
+// FA v7 sizes icons via the `--fa-width` custom property (default 1.25em) rather than the old
+// `fa-fw` class. The placeholder is a plain div, so it reads the same property to stay aligned
+// with sibling icons under any width override, falling back to FA's default when unset.
+.xh-icon--placeholder {
+  width: var(--fa-width, 1.25em);
+}

package/icon/Icon.ts

@@ -15,6 +15,7 @@ import {ReactElement} from 'react';
 import {iconCmp} from './impl/IconCmp';
 import {enhanceFaClasses, iconHtml} from './impl/IconHtml';
 import {SetRequired} from 'type-fest';
+import './Icon.scss';
 
 export interface IconProps extends HoistProps, Partial<Omit<FontAwesomeIconProps, 'ref'>> {
     /** Name of the icon in FontAwesome. */
@@ -651,6 +652,9 @@ export const Icon = {
     shieldCheck(p?: IconProps) {
         return Icon.icon({...p, iconName: 'shield-check'});
     },
+    shieldHalved(p?: IconProps) {
+        return Icon.icon({...p, iconName: 'shield-halved'});
+    },
     sigma(p?: IconProps) {
         return Icon.icon({...p, iconName: 'sigma'});
     },
@@ -929,9 +933,9 @@ export const Icon = {
     },
 
     /**
-     * Returns an empty div with FA sizing classes applied. Can be used to take up room in a layout
-     * where an icon might otherwise go - e.g. to align a series of menu items, where some items do
-     * not have an icon but others do.
+     * Returns an empty div sized to occupy the width of a standard icon. Can be used to take up
+     * room in a layout where an icon might otherwise go - e.g. to align a series of menu items,
+     * where some items do not have an icon but others do.
      */
     placeholder(opts?: IconProps): any {
         const {size, asHtml = false} = opts ?? {},

package/icon/impl/IconHtml.ts

@@ -32,5 +32,5 @@ export function iconHtml({
 }
 
 export function enhanceFaClasses(className: string, size: string) {
-    return classNames(className, 'fa-fw', 'xh-icon', isString(size) ? `fa-${size}` : null);
+    return classNames(className, 'xh-icon', isString(size) ? `fa-${size}` : null);
 }

package/icon/index.ts

@@ -176,6 +176,7 @@ import {
     faServer as faServerLight,
     faShieldAlt as faShieldAltLight,
     faShieldCheck as faShieldCheckLight,
+    faShieldHalved as faShieldHalvedLight,
     faSigma as faSigmaLight,
     faSignIn as faSignInLight,
     faSignOut as faSignOutLight,
@@ -392,6 +393,7 @@ import {
     faServer,
     faShieldAlt,
     faShieldCheck,
+    faShieldHalved,
     faSigma,
     faSignIn,
     faSignOut,
@@ -608,6 +610,7 @@ import {
     faServer as faServerSolid,
     faShieldAlt as faShieldAltSolid,
     faShieldCheck as faShieldCheckSolid,
+    faShieldHalved as faShieldHalvedSolid,
     faSigma as faSigmaSolid,
     faSignIn as faSignInSolid,
     faSignOut as faSignOutSolid,
@@ -825,6 +828,7 @@ import {
     faServer as faServerThin,
     faShieldAlt as faShieldAltThin,
     faShieldCheck as faShieldCheckThin,
+    faShieldHalved as faShieldHalvedThin,
     faSigma as faSigmaThin,
     faSignIn as faSignInThin,
     faSignOut as faSignOutThin,
@@ -1540,6 +1544,10 @@ library.add(
     faShieldCheckLight,
     faShieldCheckSolid,
     faShieldCheckThin,
+    faShieldHalved,
+    faShieldHalvedLight,
+    faShieldHalvedSolid,
+    faShieldHalvedThin,
     faSigma,
     faSigmaLight,
     faSigmaSolid,

package/mcp/data/ts-registry.ts

@@ -1432,7 +1432,7 @@ function extractSymbolDetail(entry: SymbolEntry): SymbolDetail | null {
  *
  * `JSDoc.getDescription()` returns the text before the first JSDoc block tag,
  * but the TS parser treats ANY line whose first non-whitespace char is `@` as a
- * tag boundary - even inside a fenced ``` code block. So a canonical-usage
+ * tag boundary - even inside a fenced code block. So a canonical-usage
  * example containing e.g. `@observable.ref` silently truncates the description
  * mid-example, dropping everything after it (further examples, "SEE ALSO"
  * lists, trailing prose). See #4352.

package/mobile/appcontainer/LoginPanel.scss

@@ -1,18 +1,59 @@
 .xh-login {
-  .xh-toolbar {
-    font-size: var(--xh-appbar-title-font-size-px);
-    background-color: var(--xh-appbar-bg);
-    color: var(--xh-appbar-title-color);
+  .xh-panel__content {
+    align-items: center;
+    justify-content: center;
   }
 
-  &__body {
-    margin: 40px;
+  &__content {
+    display: flex;
+    flex-direction: column;
+    width: 90vw;
+    max-width: 400px;
+    padding: 0 40px;
   }
 
-  .xh-input {
-    width: 100%;
+  &__icon {
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    margin-bottom: var(--xh-pad-double-px);
+    font-size: 26px;
+    color: var(--xh-intent-primary);
+    background-color: var(--xh-intent-primary-trans1);
+    border-radius: 10px;
+  }
+
+  &__title {
+    color: var(--xh-text-color);
+    font-size: var(--xh-font-size-large-px);
+    font-weight: 500;
+    text-align: center;
+  }
+
+  &__subtitle {
+    color: var(--xh-text-color-muted);
+    font-size: var(--xh-font-size-small-px);
+    margin: 3px 0 var(--xh-pad-double-px);
+    text-align: center;
+  }
+
+  &__field {
     margin-bottom: var(--xh-pad-px);
-    padding: 4px 8px;
+  }
+
+  &__field-label {
+    margin-bottom: var(--xh-pad-half-px);
+    font-size: var(--xh-font-size-small-px);
+    color: var(--xh-text-color-muted);
+  }
+
+  .xh-text-input {
+    width: 100%;
+    border: var(--xh-border-solid);
+    border-radius: var(--xh-border-radius-px);
   }
 
   &__warning,
@@ -32,7 +73,8 @@
     background-color: var(--xh-bg-alt);
   }
 
-  .xh-button {
-    padding: 1.5em 0;
+  &__submit {
+    margin-top: var(--xh-pad-px);
+    padding: var(--xh-pad-double-px) 0;
   }
 }

package/mobile/appcontainer/LoginPanel.ts

@@ -5,13 +5,12 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {LoginPanelModel} from '@xh/hoist/appcontainer/login/LoginPanelModel';
-import {div, filler, form} from '@xh/hoist/cmp/layout';
+import {box, div, form, viewport} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {button} from '@xh/hoist/mobile/cmp/button';
 import {textInput} from '@xh/hoist/mobile/cmp/input';
 import {panel} from '@xh/hoist/mobile/cmp/panel';
-import {toolbar} from '@xh/hoist/mobile/cmp/toolbar';
 import './LoginPanel.scss';
 
 /**
@@ -25,59 +24,85 @@ export const loginPanel = hoistCmp.factory({
     model: creates(LoginPanelModel),
 
     render({model}) {
-        const {loginMessage} = XH.appSpec,
-            {isValid, loadObserver, warning, loginInProgress} = model;
+        const {loginMessage, loginPanelIcon, clientAppName} = XH.appSpec,
+            {warning, loginInProgress} = model;
 
-        return panel({
-            className: 'xh-login',
-            testId: 'xh-login',
-            items: [
-                toolbar(filler(), XH.clientAppName, filler()),
-                panel({
-                    className: 'xh-login__body',
-                    mask: loadObserver,
+        return viewport(
+            panel({
+                className: 'xh-login',
+                testId: 'xh-login',
+                item: div({
+                    className: 'xh-login__content',
                     items: [
+                        box({
+                            className: 'xh-login__icon',
+                            item: loginPanelIcon ?? Icon.shieldHalved({prefix: 'fas'})
+                        }),
+                        div({className: 'xh-login__title', item: `Login to ${clientAppName}`}),
+                        div({
+                            className: 'xh-login__subtitle',
+                            item: 'Enter your credentials to continue.'
+                        }),
                         form({
                             className: 'xh-login__fields',
                             items: [
-                                textInput({
-                                    bind: 'username',
-                                    placeholder: 'Username',
-                                    autoComplete: 'username',
-                                    autoCapitalize: 'none',
-                                    commitOnChange: true,
-                                    testId: 'xh-login-username'
+                                field({
+                                    label: 'Username',
+                                    input: textInput({
+                                        bind: 'username',
+                                        leftIcon: Icon.user(),
+                                        autoComplete: 'username',
+                                        autoCapitalize: 'none',
+                                        commitOnChange: true,
+                                        testId: 'xh-login-username'
+                                    })
+                                }),
+                                field({
+                                    label: 'Password',
+                                    input: textInput({
+                                        bind: 'password',
+                                        leftIcon: Icon.lock(),
+                                        type: 'password',
+                                        autoComplete: 'current-password',
+                                        commitOnChange: true,
+                                        testId: 'xh-login-password'
+                                    })
                                 }),
-                                textInput({
-                                    bind: 'password',
-                                    placeholder: 'Password',
-                                    autoComplete: 'current-password',
-                                    type: 'password',
-                                    commitOnChange: true,
-                                    testId: 'xh-login-password'
+                                div({
+                                    className: 'xh-login__message',
+                                    omit: !loginMessage,
+                                    item: loginMessage
+                                }),
+                                div({
+                                    className: 'xh-login__warning',
+                                    omit: !warning,
+                                    item: warning
+                                }),
+                                button({
+                                    className: 'xh-login__submit',
+                                    icon: loginInProgress
+                                        ? Icon.spinner({spin: true})
+                                        : Icon.login(),
+                                    text: loginInProgress ? 'Logging in...' : 'Login',
+                                    intent: 'primary',
+                                    onClick: () => model.submitAsync(),
+                                    testId: 'xh-login-btn'
                                 })
                             ]
-                        }),
-                        div({
-                            className: 'xh-login__message',
-                            omit: !loginMessage,
-                            item: loginMessage
-                        }),
-                        div({
-                            className: 'xh-login__warning',
-                            omit: !warning,
-                            item: warning
-                        }),
-                        button({
-                            icon: Icon.login(),
-                            text: loginInProgress ? 'Please wait...' : 'Login',
-                            disabled: !isValid || loginInProgress,
-                            onClick: () => model.submitAsync(),
-                            testId: 'xh-login-btn'
                         })
                     ]
                 })
-            ]
+            })
+        );
+    }
+});
+
+const field = hoistCmp.factory({
+    model: false,
+    render({label, input}) {
+        return div({
+            className: 'xh-login__field',
+            items: [div({className: 'xh-login__field-label', item: label}), input]
         });
     }
 });

package/mobile/cmp/appOption/SizingModeAppOption.ts

@@ -5,8 +5,7 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {AppOptionSpec, SizingMode, XH} from '@xh/hoist/core';
-import {button} from '@xh/hoist/mobile/cmp/button';
-import {buttonGroupInput, ButtonGroupInputProps} from '@xh/hoist/mobile/cmp/input';
+import {segmentedControl, SegmentedControlProps} from '@xh/hoist/mobile/cmp/input';
 import {startCase, values} from 'lodash';
 import {FormFieldProps} from '../form/FormField';
 import '@xh/hoist/mobile/register';
@@ -16,8 +15,8 @@ interface SizingModeAppOptionSpec {
     modes?: SizingMode[];
     /** Props for nested FormField. */
     formFieldProps?: Partial<FormFieldProps>;
-    /** Props for nested ButtonGroupInput. */
-    inputProps?: Partial<ButtonGroupInputProps>;
+    /** Props for nested SegmentedControl. */
+    inputProps?: Partial<SegmentedControlProps>;
 }
 
 /**
@@ -33,18 +32,8 @@ export const sizingModeAppOption = ({
         name: 'sizingMode',
         formField: {
             label: 'Grid sizing',
-            item: buttonGroupInput({
-                items: modes.map(mode =>
-                    button({
-                        value: mode,
-                        text: startCase(mode),
-                        flex: 1,
-                        style: {
-                            fontSize: `var(--xh-grid-${mode}-font-size-px)`
-                        }
-                    })
-                ),
-                width: '100%',
+            item: segmentedControl({
+                options: modes.map(mode => ({value: mode, label: startCase(mode)})),
                 ...inputProps
             }),
             ...formFieldProps

package/mobile/cmp/appOption/ThemeAppOption.ts

@@ -6,16 +6,15 @@
  */
 import {AppOptionSpec, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon/Icon';
-import {button} from '@xh/hoist/mobile/cmp/button';
 import {FormFieldProps} from '@xh/hoist/mobile/cmp/form';
-import {buttonGroupInput, ButtonGroupInputProps} from '@xh/hoist/mobile/cmp/input';
+import {segmentedControl, SegmentedControlProps} from '@xh/hoist/mobile/cmp/input';
 import '@xh/hoist/mobile/register';
 
 interface ThemeAppOptionSpec {
     /** Props for nested FormField */
     formFieldProps?: Partial<FormFieldProps>;
-    /** Props for nested ButtonGroupInput */
-    inputProps?: Partial<ButtonGroupInputProps>;
+    /** Props for nested SegmentedControl */
+    inputProps?: Partial<SegmentedControlProps>;
 }
 
 /**
@@ -29,28 +28,12 @@ export const themeAppOption = ({
         name: 'theme',
         formField: {
             label: 'Theme',
-            item: buttonGroupInput({
-                items: [
-                    button({
-                        value: 'light',
-                        text: 'Light',
-                        icon: Icon.sun(),
-                        width: '33.33%'
-                    }),
-                    button({
-                        value: 'dark',
-                        text: 'Dark',
-                        icon: Icon.moon(),
-                        width: '33.33%'
-                    }),
-                    button({
-                        value: 'system',
-                        text: 'System',
-                        icon: Icon.sync(),
-                        width: '33.33%'
-                    })
+            item: segmentedControl({
+                options: [
+                    {value: 'light', label: 'Light', icon: Icon.sun()},
+                    {value: 'dark', label: 'Dark', icon: Icon.moon()},
+                    {value: 'system', label: 'System', icon: Icon.sync()}
                 ],
-                width: '100%',
                 ...inputProps
             }),
             ...formFieldProps

package/mobile/cmp/button/grid/ExpandToLevelButton.ts

@@ -21,7 +21,8 @@ export interface ExpandToLevelButtonProps extends MenuButtonProps {
 
 /**
  * A menu button to expand a multi-level grouped or tree grid out to a desired level.
- * Requires {@link GridConfig.levelLabels} to be configured on the bound GridModel.
+ * Requires {@link GridConfig.levelLabels} to be configured on the bound GridModel - the menu offers
+ * one entry per labelled level, so a partial array will limit the available expand-to targets.
  */
 export const [ExpandToLevelButton, expandToLevelButton] =
     hoistCmp.withFactory<ExpandToLevelButtonProps>({
@@ -51,13 +52,11 @@ export const [ExpandToLevelButton, expandToLevelButton] =
             }
 
             // Render a disabled button if requested or if we have a flat grid, or no level labels
-            const {maxDepth, expandLevel, resolvedLevelLabels} = gridModel;
+            const {maxDepth, resolvedLevelLabels} = gridModel;
             if (disabled || !maxDepth || !resolvedLevelLabels) return disabledButton();
 
             const menuItems: MenuItemLike[] = resolvedLevelLabels.map((label, idx) => {
-                const isCurrLevel =
-                    expandLevel === idx ||
-                    (expandLevel > maxDepth && idx === resolvedLevelLabels.length - 1);
+                const isCurrLevel = gridModel.isCurrentExpandLevel(idx);
 
                 return {
                     icon: isCurrLevel ? Icon.check() : Icon.placeholder(),

package/mobile/cmp/error/impl/ErrorMessage.ts

@@ -5,7 +5,7 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {hoistCmp} from '@xh/hoist/core';
-import {div, filler, hbox, p} from '@xh/hoist/cmp/layout';
+import {div, p, vbox} from '@xh/hoist/cmp/layout';
 import {ErrorMessageProps} from '@xh/hoist/cmp/error';
 import {button, ButtonProps} from '@xh/hoist/mobile/cmp/button';
 import {Icon} from '@xh/hoist/icon';
@@ -21,15 +21,11 @@ export const errorMessageImpl = hoistCmp.factory<
     Omit<ErrorMessageProps, 'error' | 'actionFn' | 'detailsFn'>
 >({
     render({message, title, actionButtonProps, detailsButtonProps}) {
-        let buttons = [],
-            buttonBar = null;
+        // Stack action buttons vertically and full-width - idiomatic for mobile.
+        const buttons = [];
         if (detailsButtonProps) buttons.push(detailsButton(detailsButtonProps as ButtonProps));
         if (actionButtonProps) buttons.push(actionButton(actionButtonProps as ButtonProps));
-        if (buttons.length == 1) {
-            buttonBar = buttons[0];
-        } else if (buttons.length == 2) {
-            buttonBar = hbox(buttons[0], filler(), buttons[1]);
-        }
+        const buttonBar = buttons.length ? vbox({gap: true, items: buttons}) : null;
 
         return div({
             className: 'xh-error-message__inner',