Merge pull request #329 from dli7319/glasses_action_icon

Glasses UI: Fix action button icon sizing.

Author: dli7319

src/addons/glasses/ui/ActionButton.ts

@@ -5,19 +5,21 @@ import {
   RenderContext,
   WithSignal,
 } from '@pmndrs/uikit';
-import {TextWithEmoji} from '../../uiblocks/src/core/primitives/TextWithEmoji';
 import {computed} from '@preact/signals-core';
 
 import {HighlightMaterial} from './HighlightMaterial';
 import {MaterialSymbolsIcon} from './MaterialSymbolsIcon';
+import {TextWithEmoji} from '../../uiblocks/src/core/primitives/TextWithEmoji';
 
+/** Properties for the ActionButton component. */
 export type ActionButtonOutProperties = {
   text: string;
   icon?: string;
   iconStyle?: string;
   iconWeight?: number;
 } & BaseOutProperties;
 
+/** A reusable action button component with icon and text support. */
 export class ActionButton<
   OutProperties extends ActionButtonOutProperties = ActionButtonOutProperties,
 > extends Container<OutProperties> {
@@ -54,24 +56,28 @@ export class ActionButton<
       ...config,
     });
 
+    const iconContainer = new Container({});
+    this.add(iconContainer);
     const icon = new MaterialSymbolsIcon({
       icon: this.properties.signal.icon,
       iconStyle: this.properties.signal.iconStyle,
       iconWeight: this.properties.signal.iconWeight,
-      width: 40,
+      height: 40,
       color: 0xa8c7fa,
       display: computed(() =>
         this.properties.signal.icon ? 'initial' : 'none'
       ),
+      alignSelf: 'center',
     });
-    this.add(icon);
+    iconContainer.add(icon);
 
     const text = new TextWithEmoji({
       text: this.properties.signal.text,
       fontSize: 24,
       color: 'white',
       fontWeight: 600,
       letterSpacing: 1.26,
+      wordBreak: 'keep-all',
     });
     this.add(text);
   }