@xh/hoist 71.0.0-SNAPSHOT.1735861709598 → 71.0.0-SNAPSHOT.1736120910674

package/CHANGELOG.md

@@ -2,9 +2,10 @@
 
 ## v71.0.0-SNAPSHOT - unreleased
 
-### 💥 Breaking Changes
+### 💥 Breaking Changes (upgrade 🟢 Medium - Hoist core update, adjust imports)
 
-* Requires `hoist-core >= 26.1` with new APIs to support `ViewManager`.
+* Requires `hoist-core >= 27.0` with new APIs to support `ViewManager` and additional cluster
+  synchronization monitor in admin client.
 * `ErrorMessage` is now cross-platform - update imports from `@xh/hoist/desktop/cmp/error`
   or `@xh/hoist/mobile/cmp/error` to `@xh/hoist/cmp/error`.
 * `Mask` is now cross-platform - update imports from `@xh/hoist/desktop/cmp/mask` or
@@ -34,6 +35,8 @@
 * Updated sorting on grouped grids to place ungrouped items at the bottom.
 * `DashCanvas` views can now be resized left and up in addition to right and down.
 * `FetchService.autoGenCorrelationIds` now supports a functional form for per-request behavior.
+* New `Objects` tab in admin client supports comparing state across the cluster, and flagging any
+  persistent state inconsistencies.
 
 ### 🐞 Bug Fixes
 

package/admin/AppModel.ts

@@ -71,14 +71,21 @@ export class AppModel extends HoistAppModel {
                 name: 'cluster',
                 path: '/cluster',
                 children: [
-                    {name: 'logs', path: '/logs'},
-                    {name: 'memory', path: '/memory'},
-                    {name: 'jdbcPool', path: '/jdbcPool'},
-                    {name: 'environment', path: '/environment'},
-                    {name: 'services', path: '/services'},
-                    {name: 'objects', path: '/objects'},
-                    {name: 'hibernate', path: '/hibernate'},
-                    {name: 'webSockets', path: '/webSockets'}
+                    {
+                        name: 'instances',
+                        path: '/instances',
+                        children: [
+                            {name: 'logs', path: '/logs'},
+                            {name: 'memory', path: '/memory'},
+                            {name: 'jdbcPool', path: '/jdbcPool'},
+                            {name: 'environment', path: '/environment'},
+                            {name: 'services', path: '/services'},
+                            {name: 'hibernate', path: '/hibernate'},
+                            {name: 'consistency', path: '/consistency'},
+                            {name: 'webSockets', path: '/webSockets'}
+                        ]
+                    },
+                    {name: 'objects', path: '/objects'}
                 ]
             },
             {

package/admin/tabs/cluster/ClusterTab.ts

@@ -4,70 +4,21 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {grid} from '@xh/hoist/cmp/grid';
+import {clusterObjectsPanel} from '@xh/hoist/admin/tabs/cluster/objects/ClusterObjectsPanel';
+import {instancesTab} from '@xh/hoist/admin/tabs/cluster/instances/InstancesTab';
 import {tabContainer} from '@xh/hoist/cmp/tab';
-import {creates, hoistCmp} from '@xh/hoist/core';
-import {mask} from '@xh/hoist/cmp/mask';
-import {panel} from '@xh/hoist/desktop/cmp/panel';
-import {tabSwitcher} from '@xh/hoist/desktop/cmp/tab';
-import {box, div, hspacer, p, placeholder, vframe} from '@xh/hoist/cmp/layout';
-import {ClusterTabModel} from './ClusterTabModel';
+import {hoistCmp} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 
-export const clusterTab = hoistCmp.factory({
-    model: creates(ClusterTabModel),
-    render({model}) {
-        return vframe(
-            panel({
-                modelConfig: {
-                    side: 'top',
-                    defaultSize: 105,
-                    minSize: 75,
-                    collapsible: false,
-                    persistWith: model.persistWith
-                },
-                item: grid()
-            }),
-            detailPanel(),
-            failedConnectionMask()
-        );
-    }
-});
-
-export const detailPanel = hoistCmp.factory<ClusterTabModel>({
-    render({model}) {
-        const {instance, lastLoadException} = model;
-        if (!instance?.isReady) {
-            return placeholder({
-                items: [Icon.server(), 'Select a running instance above.'],
-                omit: lastLoadException
-            });
+export const clusterTab = hoistCmp.factory(() =>
+    tabContainer({
+        modelConfig: {
+            route: 'default.cluster',
+            switcher: {orientation: 'left', testId: 'cluster-tab-switcher'},
+            tabs: [
+                {id: 'instances', icon: Icon.info(), content: instancesTab},
+                {id: 'objects', icon: Icon.diff(), content: clusterObjectsPanel}
+            ]
         }
-
-        return panel({
-            compactHeader: true,
-            tbar: [
-                Icon.server(),
-                box({width: 150, item: model.formatInstance(instance)}),
-                hspacer(25),
-                tabSwitcher()
-            ],
-            flex: 1,
-            item: tabContainer()
-        });
-    }
-});
-
-export const failedConnectionMask = hoistCmp.factory<ClusterTabModel>({
-    render({model}) {
-        return mask({
-            message: div(
-                p('Attempting to connect to cluster.'),
-                p('Local instance may be unavailable, please wait.')
-            ),
-            isDisplayed: true,
-            spinner: true,
-            omit: !model.lastLoadException
-        });
-    }
-});
+    })
+);

package/admin/tabs/cluster/{BaseInstanceModel.ts → instances/BaseInstanceModel.ts}

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {ClusterTabModel} from '@xh/hoist/admin/tabs/cluster/ClusterTabModel';
+import {InstancesTabModel} from '@xh/hoist/admin/tabs/cluster/instances/InstancesTabModel';
 import {HoistModel, LoadSpec, lookup, PlainObject, XH} from '@xh/hoist/core';
 import {fmtDateTimeSec, fmtJson} from '@xh/hoist/format';
 import {DAYS} from '@xh/hoist/utils/datetime';
@@ -15,7 +15,7 @@ import {isDisplayed} from '@xh/hoist/utils/js';
 export class BaseInstanceModel extends HoistModel {
     viewRef = createRef<HTMLElement>();
 
-    @lookup(() => ClusterTabModel) parent: ClusterTabModel;
+    @lookup(() => InstancesTabModel) parent: InstancesTabModel;
 
     get instanceName(): string {
         return this.parent.instanceName;

package/admin/tabs/cluster/instances/InstancesTab.ts

@@ -0,0 +1,73 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+import {grid} from '@xh/hoist/cmp/grid';
+import {tabContainer} from '@xh/hoist/cmp/tab';
+import {creates, hoistCmp} from '@xh/hoist/core';
+import {mask} from '@xh/hoist/cmp/mask';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {tabSwitcher} from '@xh/hoist/desktop/cmp/tab';
+import {box, div, hspacer, p, placeholder, vframe} from '@xh/hoist/cmp/layout';
+import {InstancesTabModel} from '@xh/hoist/admin/tabs/cluster/instances/InstancesTabModel';
+import {Icon} from '@xh/hoist/icon';
+
+export const instancesTab = hoistCmp.factory({
+    model: creates(InstancesTabModel),
+    render({model}) {
+        return vframe(
+            panel({
+                modelConfig: {
+                    side: 'top',
+                    defaultSize: 105,
+                    minSize: 75,
+                    collapsible: false,
+                    persistWith: model.persistWith
+                },
+                item: grid()
+            }),
+            detailPanel(),
+            failedConnectionMask()
+        );
+    }
+});
+
+export const detailPanel = hoistCmp.factory<InstancesTabModel>({
+    render({model}) {
+        const {instance, lastLoadException} = model;
+        if (!instance?.isReady) {
+            return placeholder({
+                items: [Icon.server(), 'Select a running instance above.'],
+                omit: lastLoadException
+            });
+        }
+
+        return panel({
+            compactHeader: true,
+            tbar: [
+                Icon.server(),
+                box({width: 150, item: model.formatInstance(instance)}),
+                hspacer(25),
+                tabSwitcher()
+            ],
+            flex: 1,
+            item: tabContainer()
+        });
+    }
+});
+
+export const failedConnectionMask = hoistCmp.factory<InstancesTabModel>({
+    render({model}) {
+        return mask({
+            message: div(
+                p('Attempting to connect to cluster.'),
+                p('Local instance may be unavailable, please wait.')
+            ),
+            isDisplayed: true,
+            spinner: true,
+            omit: !model.lastLoadException
+        });
+    }
+});

package/admin/tabs/cluster/{ClusterTabModel.ts → instances/InstancesTabModel.ts}

@@ -6,14 +6,16 @@
  */
 import {AppModel} from '@xh/hoist/admin/AppModel';
 import {timestampNoYear} from '@xh/hoist/admin/columns';
-import {connPoolMonitorPanel} from '@xh/hoist/admin/tabs/cluster/connpool/ConnPoolMonitorPanel';
-import {distributedObjectsPanel} from '@xh/hoist/admin/tabs/cluster/distobjects/DistributedObjectsPanel';
-import {serverEnvPanel} from '@xh/hoist/admin/tabs/cluster/environment/ServerEnvPanel';
-import {logViewer} from '@xh/hoist/admin/tabs/cluster/logs/LogViewer';
-import {usedHeapMb, usedPctMax} from '@xh/hoist/admin/tabs/cluster/memory/MemoryMonitorModel';
-import {memoryMonitorPanel} from '@xh/hoist/admin/tabs/cluster/memory/MemoryMonitorPanel';
-import {servicePanel} from '@xh/hoist/admin/tabs/cluster/services/ServicePanel';
-import {webSocketPanel} from '@xh/hoist/admin/tabs/cluster/websocket/WebSocketPanel';
+import {connPoolMonitorPanel} from '@xh/hoist/admin/tabs/cluster/instances/connpool/ConnPoolMonitorPanel';
+import {serverEnvPanel} from '@xh/hoist/admin/tabs/cluster/instances/environment/ServerEnvPanel';
+import {logViewer} from '@xh/hoist/admin/tabs/cluster/instances/logs/LogViewer';
+import {
+    usedHeapMb,
+    usedPctMax
+} from '@xh/hoist/admin/tabs/cluster/instances/memory/MemoryMonitorModel';
+import {memoryMonitorPanel} from '@xh/hoist/admin/tabs/cluster/instances/memory/MemoryMonitorPanel';
+import {servicePanel} from '@xh/hoist/admin/tabs/cluster/instances/services/ServicePanel';
+import {webSocketPanel} from '@xh/hoist/admin/tabs/cluster/instances/websocket/WebSocketPanel';
 import {badge} from '@xh/hoist/cmp/badge';
 import {GridModel, numberCol} from '@xh/hoist/cmp/grid';
 import {hbox} from '@xh/hoist/cmp/layout';
@@ -27,7 +29,7 @@ import {Timer} from '@xh/hoist/utils/async';
 import {SECONDS} from '@xh/hoist/utils/datetime';
 import {ReactNode} from 'react';
 
-export class ClusterTabModel extends HoistModel {
+export class InstancesTabModel extends HoistModel {
     override persistWith = {localStorageKey: 'xhAdminClusterTabState'};
 
     @lookup(TabModel) private tabModel: TabModel;
@@ -57,6 +59,10 @@ export class ClusterTabModel extends HoistModel {
         return this.gridModel.store.allCount > 1;
     }
 
+    get instanceNames(): string[] {
+        return this.gridModel.store.records.map(r => r.data.name);
+    }
+
     override async doLoadAsync(loadSpec: LoadSpec) {
         const {gridModel} = this;
 
@@ -182,7 +188,7 @@ export class ClusterTabModel extends HoistModel {
 
     private createTabContainerModel() {
         return new TabContainerModel({
-            route: 'default.cluster',
+            route: 'default.cluster.instances',
             switcher: false,
             tabs: [
                 {id: 'logs', icon: Icon.fileText(), content: logViewer},
@@ -195,12 +201,6 @@ export class ClusterTabModel extends HoistModel {
                 },
                 {id: 'environment', icon: Icon.globe(), content: serverEnvPanel},
                 {id: 'services', icon: Icon.gears(), content: servicePanel},
-                {
-                    id: 'objects',
-                    title: 'Distributed Objects',
-                    icon: Icon.grip(),
-                    content: distributedObjectsPanel
-                },
                 {id: 'webSockets', title: 'WebSockets', icon: Icon.bolt(), content: webSocketPanel}
             ]
         });

package/admin/tabs/cluster/{connpool → instances/connpool}/ConnPoolMonitorModel.ts

@@ -6,7 +6,7 @@
  */
 import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {timestampNoYear} from '@xh/hoist/admin/columns';
-import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/BaseInstanceModel';
+import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/instances/BaseInstanceModel';
 import {ChartModel} from '@xh/hoist/cmp/chart';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {LoadSpec, managed, PlainObject, XH} from '@xh/hoist/core';

package/admin/tabs/cluster/{connpool → instances/connpool}/ConnPoolMonitorPanel.ts

@@ -5,7 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {AppModel} from '@xh/hoist/admin/AppModel';
-import {ConnPoolMonitorModel} from '@xh/hoist/admin/tabs/cluster/connpool/ConnPoolMonitorModel';
+import {ConnPoolMonitorModel} from '@xh/hoist/admin/tabs/cluster/instances/connpool/ConnPoolMonitorModel';
 import {chart} from '@xh/hoist/cmp/chart';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {filler, hframe, vframe} from '@xh/hoist/cmp/layout';

package/admin/tabs/cluster/{environment → instances/environment}/ServerEnvModel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/BaseInstanceModel';
+import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/instances/BaseInstanceModel';
 import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {LoadSpec, managed, XH} from '@xh/hoist/core';

package/admin/tabs/cluster/{environment → instances/environment}/ServerEnvPanel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {ServerEnvModel} from '@xh/hoist/admin/tabs/cluster/environment/ServerEnvModel';
+import {ServerEnvModel} from '@xh/hoist/admin/tabs/cluster/instances/environment/ServerEnvModel';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {filler} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';

package/admin/tabs/cluster/{logs → instances/logs}/LogViewer.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {logLevelDialog} from '@xh/hoist/admin/tabs/cluster/logs/levels/LogLevelDialog';
+import {logLevelDialog} from '@xh/hoist/admin/tabs/cluster/instances/logs/levels/LogLevelDialog';
 import {grid} from '@xh/hoist/cmp/grid';
 import {hframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';

package/admin/tabs/cluster/{logs → instances/logs}/LogViewerModel.ts

@@ -6,7 +6,7 @@
  */
 import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {AppModel} from '@xh/hoist/admin/AppModel';
-import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/BaseInstanceModel';
+import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/instances/BaseInstanceModel';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {LoadSpec, managed, XH} from '@xh/hoist/core';
 import {RecordActionSpec} from '@xh/hoist/data';

package/admin/tabs/cluster/{logs → instances/logs}/levels/LogLevelDialog.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {LogLevelDialogModel} from '@xh/hoist/admin/tabs/cluster/logs/levels/LogLevelDialogModel';
+import {LogLevelDialogModel} from '@xh/hoist/admin/tabs/cluster/instances/logs/levels/LogLevelDialogModel';
 import {filler, span} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';

package/admin/tabs/cluster/{logs → instances/logs}/levels/LogLevelDialogModel.ts

@@ -7,7 +7,7 @@
 import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {AppModel} from '@xh/hoist/admin/AppModel';
 import * as Col from '@xh/hoist/admin/columns/Rest';
-import {LogViewerModel} from '@xh/hoist/admin/tabs/cluster/logs/LogViewerModel';
+import {LogViewerModel} from '@xh/hoist/admin/tabs/cluster/instances/logs/LogViewerModel';
 import {HoistModel, managed, lookup, LoadSpec} from '@xh/hoist/core';
 import {FieldSpec} from '@xh/hoist/data';
 import {textInput} from '@xh/hoist/desktop/cmp/input';

package/admin/tabs/cluster/{memory → instances/memory}/MemoryMonitorModel.ts

@@ -6,7 +6,7 @@
  */
 import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {timestampNoYear} from '@xh/hoist/admin/columns';
-import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/BaseInstanceModel';
+import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/instances/BaseInstanceModel';
 import {ChartModel} from '@xh/hoist/cmp/chart';
 import {ColumnSpec, GridModel} from '@xh/hoist/cmp/grid';
 import {LoadSpec, managed, XH} from '@xh/hoist/core';

package/admin/tabs/cluster/{memory → instances/memory}/MemoryMonitorPanel.ts

@@ -5,7 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {AppModel} from '@xh/hoist/admin/AppModel';
-import {MemoryMonitorModel} from '@xh/hoist/admin/tabs/cluster/memory/MemoryMonitorModel';
+import {MemoryMonitorModel} from '@xh/hoist/admin/tabs/cluster/instances/memory/MemoryMonitorModel';
 import {chart} from '@xh/hoist/cmp/chart';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {code, filler, fragment, hbox, hspacer, span, vframe} from '@xh/hoist/cmp/layout';

package/admin/tabs/cluster/{services → instances/services}/DetailsPanel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {DetailsModel} from '@xh/hoist/admin/tabs/cluster/services/DetailsModel';
+import {DetailsModel} from '@xh/hoist/admin/tabs/cluster/instances/services/DetailsModel';
 import {placeholder} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
 import {errorMessage} from '@xh/hoist/cmp/error';

package/admin/tabs/cluster/{services → instances/services}/ServiceModel.ts

@@ -7,7 +7,7 @@
 import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import {AppModel} from '@xh/hoist/admin/AppModel';
 import {timestampNoYear} from '@xh/hoist/admin/columns';
-import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/BaseInstanceModel';
+import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/instances/BaseInstanceModel';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {br, fragment} from '@xh/hoist/cmp/layout';
 import {LoadSpec, managed, XH} from '@xh/hoist/core';
@@ -25,7 +25,7 @@ export class ServiceModel extends BaseInstanceModel {
     textFilter: FilterTestFn = null;
 
     clearCachesAction: RecordActionSpec = {
-        text: 'Clear Caches',
+        text: 'Clear Service Caches',
         icon: Icon.reset(),
         intent: 'warning',
         actionFn: () => this.clearCachesAsync(false),
@@ -37,7 +37,7 @@ export class ServiceModel extends BaseInstanceModel {
     };
 
     clearClusterCachesAction: RecordActionSpec = {
-        text: 'Clear Caches (entire cluster)',
+        text: 'Clear Service Caches (entire cluster)',
         icon: Icon.reset(),
         intent: 'warning',
         actionFn: () => this.clearCachesAsync(true),

package/admin/tabs/cluster/{services → instances/services}/ServicePanel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {detailsPanel} from '@xh/hoist/admin/tabs/cluster/services/DetailsPanel';
+import {detailsPanel} from '@xh/hoist/admin/tabs/cluster/instances/services/DetailsPanel';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {filler, hframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';

package/admin/tabs/cluster/{websocket → instances/websocket}/WebSocketModel.ts

@@ -6,7 +6,7 @@
  */
 import {exportFilenameWithDate} from '@xh/hoist/admin/AdminUtils';
 import * as Col from '@xh/hoist/admin/columns';
-import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/BaseInstanceModel';
+import {BaseInstanceModel} from '@xh/hoist/admin/tabs/cluster/instances/BaseInstanceModel';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {div, p} from '@xh/hoist/cmp/layout';
 import {LoadSpec, managed, XH} from '@xh/hoist/core';

package/admin/tabs/cluster/{websocket → instances/websocket}/WebSocketPanel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {WebSocketModel} from '@xh/hoist/admin/tabs/cluster/websocket/WebSocketModel';
+import {WebSocketModel} from '@xh/hoist/admin/tabs/cluster/instances/websocket/WebSocketModel';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {box, filler, fragment, p} from '@xh/hoist/cmp/layout';
 import {relativeTimestamp} from '@xh/hoist/cmp/relativetimestamp';

package/admin/tabs/cluster/objects/ClusterObjects.scss

@@ -0,0 +1,25 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+
+.xh-cluster-objects-row-has-break:not(.ag-row-selected) {
+  background-color: var(--xh-intent-danger-trans1) !important;
+}
+
+.xh-cluster-objects-cell-danger {
+  background-color: var(--xh-intent-danger-trans1) !important;
+}
+
+.xh-cluster-objects-cell-success {
+  background-color: var(--xh-intent-success-trans1) !important;
+}
+
+.xh-cluster-objects-result-count {
+  align-items: center;
+  .xh-icon {
+    margin-right: 0.5em;
+  }
+}