[WB-2123] ActivityIconButton: Update styling to avoid truncating labels by default (#2885)

## Summary:

Changes `ActivityIconButton` styling to allow longer labels in the same line.
This will allow us to display the label correctly for non-EN locales.

Slack thread: https://khanacademy.slack.com/archives/C07CA2YR0BZ/p1759503438340869

Also took the opportunity to apply some default styles in the chonky box.

Issue: WB-2123

## Test plan:

Verify that the ActivityIconButton snapshots look as expected.

This means that short labels won't truncate, and longer labels will become
multi-line when it exceeds 200px.

Author: jandrade

Reviewers: beaesguerra

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ 12 checks were successful, ⏭️  3 checks have been skipped

Pull Request URL: #2885

Author: jandrade

.changeset/tough-scissors-cry.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-icon-button": patch
+---
+
+Changes `ActivityIconButton` styling to allow longer labels in the same line.

__docs__/wonder-blocks-icon-button/activity-icon-button-testing-snapshots.stories.tsx

@@ -12,6 +12,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {semanticColor, sizing} from "@khanacademy/wonder-blocks-tokens";
 import {Icon} from "@khanacademy/wonder-blocks-icon";
 import khanmigoIcon from "./images/mini-khanmigo.svg";
+import {StatusBadge} from "@khanacademy/wonder-blocks-badge";
 
 /**
  * The following stories are used to generate the pseudo states for the
@@ -136,7 +137,7 @@ export const Scenarios: Story = {
                 },
             },
             {
-                name: "Long label with single word in two lines",
+                name: "Long label with single word in same line",
                 props: {
                     children: (
                         <ActivityIconButton
@@ -187,6 +188,47 @@ export const Scenarios: Story = {
                     ),
                 },
             },
+            {
+                name: "With custom size + badge",
+                props: {
+                    children: (
+                        <ActivityIconButton
+                            icon={
+                                <>
+                                    <StatusBadge
+                                        label="new"
+                                        kind="info"
+                                        styles={{
+                                            root: {
+                                                top: sizing.size_0,
+                                                right: sizing.size_0,
+                                                position: "absolute",
+                                                transform:
+                                                    "translate(-50%, -50%)",
+                                            },
+                                        }}
+                                    />
+                                    <Icon size="large">
+                                        <img alt="" src={khanmigoIcon} />
+                                    </Icon>
+                                </>
+                            }
+                            label="Cool badge"
+                            actionType="neutral"
+                            kind="secondary"
+                            styles={{
+                                root: {
+                                    marginBlock: sizing.size_160,
+                                },
+                                box: {
+                                    inlineSize: sizing.size_960,
+                                    blockSize: sizing.size_960,
+                                },
+                            }}
+                        />
+                    ),
+                },
+            },
         ];
         return (
             <ScenariosLayout scenarios={scenarios}>

packages/wonder-blocks-icon-button/src/components/activity-icon-button.tsx

@@ -196,7 +196,7 @@ const theme = {
             disabled: semanticColor.core.foreground.disabled.default,
         },
         layout: {
-            width: sizing.size_640,
+            inlineSize: sizing.size_640,
         },
     },
 };
@@ -249,8 +249,9 @@ const _generateStyles = (
             // layout
             flexDirection: "column",
             gap: sizing.size_020,
-            // Prevent the button from stretching to fill the parent
-            maxWidth: theme.label.layout.width,
+            // Putting an arbitrary max inline size to prevent the button from
+            // stretching to fill the parent.
+            maxInlineSize: 200,
             alignSelf: "flex-start",
             justifySelf: "center",
             /**
@@ -302,6 +303,9 @@ const _generateStyles = (
             marginBlockEnd: theme.root.shadow.y.rest,
             paddingBlock: theme.root.layout.padding.block,
             paddingInline: theme.root.layout.padding.inline,
+            inlineSize: theme.label.layout.inlineSize,
+            justifyContent: "center",
+            alignItems: "center",
             // theming
             background: themeVariant.background[kind].rest,
             border: `${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,