refactor(ui): centralize compact icon button sizing in EMCN by BillLeoutsakosvl346 · Pull Request #7991 · simstudioai/sim

BillLeoutsakosvl346 · 2026-09-18T23:27:37Z

Summary

Product icon buttons repeatedly set square dimensions and zero padding through consumer classes. Add Button's iconSize option and migrate all 25 matching EMCN Button locations across 10 product files, including the shared workflow action-bar recipe.

compact preserves spacing-based sizing (size-6); compact-fixed preserves fixed 24px sizing. Both own zero padding while retaining the selected size and variant's typography, corners, icon strokes and colors. This keeps the original behavior when the browser's font size changes. Consumers retain positioning, canvas width overrides, icons, labels, disabled conditions and handlers. Omitting the new option leaves existing buttons unchanged.

BulkActionButton and ComposerActionButton exclude the inherited iconSize and iconPadding props because these specialized controls already own their geometry. Their rendering is unchanged. Landing pages, global CSS, dependencies and audit tooling are excluded.

The message Copy/Like/Dislike/Fork actions use the shared quiet compact treatment: 26px becomes 24px, the corner radius becomes 5px, and neutral/hover colours and pending opacity follow Button defaults. These small visual differences are intentional; their native disabled state, handlers and labels are retained. The geometry-preservation statements above concern the original 25 EMCN Button migrations.

Validation

350 EMCN tests pass. All 26 workspace type checks and lint checks, API validation, import-specifier checks and diff checks pass.
The initial migration's category audit removed all 32 targeted overrides; seven additional action-bar usages were verified through their shared recipe. Consumer AST and render comparisons preserve handlers and the original class sets, including 448 action-bar combinations and 210 existing Button variant/size/padding combinations.
The original 920 isolated Chromium comparisons cover light/dark themes, normal/enlarged root font sizes and idle/hover/focus/active/disabled states. The subsequent specialized-prop restrictions affect types only.
External combined-source compiler assertions confirm fixed-geometry controls reject generic icon sizing while Button retains both meaningful sizing options. No audit helpers or extra type-test fixtures are included in this PR.

vercel · 2026-09-18T23:27:43Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
docs	Ready	Preview	Sep 23, 2026 2:14am UTC

greptile-apps · 2026-09-18T23:30:03Z

Confidence Score: 5/5

The PR appears safe to merge, with no outstanding findings or new changes requiring review since the previous review.

Summary

The PR centralizes compact icon-button geometry in EMCN and migrates product controls away from repeated sizing and padding classes.

Adds responsive compact and fixed-pixel compact-fixed icon-size variants to the shared Button.
Migrates compact controls across workspace and workflow-renderer surfaces while retaining consumer-specific behavior and positioning.
Prevents specialized bulk and composer action buttons from accepting generic geometry props.
Adds coverage for equivalent class output and explicit padding/width precedence.
No code has changed since the previous review.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart LR
    C[Product icon-button consumers] --> B[EMCN Button]
    B --> R{iconSize}
    R -->|compact| S[Spacing-based 24px square]
    R -->|compact-fixed| F[Fixed 24px square]
    S --> P[Zero default padding]
    F --> P
    P --> O[Consumer classes retain positioning and overrides]
    B -. geometry props excluded .-> BA[BulkActionButton]
    B -. geometry props excluded .-> CA[ComposerActionButton]

_{Reviews (6) · Last reviewed commit: "improvement(ui): reuse compact buttons f..."}

cubic-dev-ai

No issues found across 12 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-18T23:34:47Z

@greptile

BillLeoutsakosvl346 · 2026-09-19T19:58:38Z

@greptileai @cubic-dev-ai Please review the current head; the previous scored reviews cover earlier commits.

cubic-dev-ai · 2026-09-19T19:58:50Z

@greptileai @cubic-dev-ai Please review the current head; the previous scored reviews cover earlier commits.

@BillLeoutsakosvl346 I’ve started reviewing the changes since the last completed review. I’ll post the results here when it’s done.

cubic-dev-ai

0 issues found across 3 files (changes from recent commits).

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-19T20:03:27Z

@greptileai @cubic-dev-ai Please review the latest commit. The import-order directive now uses TSDoc while retaining the documented import order and passing Biome.

cubic-dev-ai · 2026-09-19T20:03:38Z

@greptileai @cubic-dev-ai Please review the latest commit. The import-order directive now uses TSDoc while retaining the documented import order and passing Biome.

@BillLeoutsakosvl346 I’ve started reviewing the changes since the last completed review. I’ll post the results here when it’s done.

cubic-dev-ai

0 issues found across 1 file (changes from recent commits).

_{Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-19T20:08:43Z

@cubic-dev-ai Please run a full review of this PR against its base branch on the current head, rather than an incremental review of only the latest commit. The latest incremental review reported no issues; this is the final review of the complete change.

cubic-dev-ai · 2026-09-19T20:08:51Z

@cubic-dev-ai Please run a full review of this PR against its base branch on the current head, rather than an incremental review of only the latest commit. The latest incremental review reported no issues; this is the final review of the complete change.

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

No issues found across 14 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-21T17:57:05Z

Before / after visual comparison

Representative icon-button sizing combinations after replacing local size classes with shared sizes.

Within each numbered tile: first control = before; second control = after.

Rendered component fixtures with application CSS and local data, rather than authenticated product-page screenshots. These are representative visual examples, not end-to-end behavior coverage.

The fixture uses a generic X icon to isolate button sizing; these are not screenshots of the actual caller icons. This comparison covers the sizing migration, not every message-action interaction.

Current PR head checked at posting: 0be585b6b3.

Additional theme/state comparisons

Co-authored-by: Bill Leoutsakos <billleoutsakos@Mac.localdomain>

BillLeoutsakosvl346 · 2026-09-22T19:28:01Z

@greptile

BillLeoutsakosvl346 · 2026-09-22T19:28:02Z

@cubic-dev-ai review this PR

cubic-dev-ai · 2026-09-22T19:28:08Z

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

All reported issues were addressed across 16 files

_{Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-22T19:38:28Z

@greptile

BillLeoutsakosvl346 · 2026-09-22T19:38:29Z

@cubic-dev-ai review this PR

cubic-dev-ai · 2026-09-22T19:38:35Z

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

No issues found across 16 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

* improvement(emcn): share ordinary action geometry in Button * improvement(ui): use inline Button for small text actions (#8177) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * fix(emcn): assert responsive icon size map as const --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

vercel Bot deployed to Preview September 18, 2026 23:29 View deployment

greptile-apps Bot reviewed Sep 18, 2026

View reviewed changes

Comment thread packages/emcn/src/components/button/button.test.tsx Outdated

cubic-dev-ai Bot reviewed Sep 18, 2026

View reviewed changes

vercel Bot deployed to Preview September 18, 2026 23:35 View deployment

vercel Bot deployed to Preview September 19, 2026 16:38 View deployment

cubic-dev-ai Bot reviewed Sep 19, 2026

View reviewed changes

greptile-apps Bot reviewed Sep 19, 2026

View reviewed changes

Comment thread packages/emcn/src/components/button/button.test.tsx Outdated

cubic-dev-ai Bot reviewed Sep 19, 2026

View reviewed changes

vercel Bot deployed to Preview September 19, 2026 20:05 View deployment

cubic-dev-ai Bot reviewed Sep 19, 2026

View reviewed changes

vercel Bot temporarily deployed to Preview September 21, 2026 03:32 Inactive

Bill Leoutsakos and others added 5 commits September 22, 2026 12:20

refactor(emcn): centralize compact icon button sizing

91bf6ae

test(emcn): follow documented button test import order

8012ece

fix(emcn): restrict specialized action button sizing props

8618d27

style(test): use TSDoc for the import-order directive

18c007a

improvement(ui): reuse compact buttons for message actions (#8087)

13f85d8

Co-authored-by: Bill Leoutsakos <billleoutsakos@Mac.localdomain>

BillLeoutsakosvl346 force-pushed the codex/control-fix-icon-button-sizing branch from 0be585b to 13f85d8 Compare September 22, 2026 19:28

vercel Bot deployed to Preview September 22, 2026 19:29 View deployment

greptile-apps Bot reviewed Sep 22, 2026

View reviewed changes

Comment thread apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx

cubic-dev-ai Bot reviewed Sep 22, 2026

View reviewed changes

Comment thread apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx

cubic-dev-ai Bot reviewed Sep 22, 2026

View reviewed changes

vercel Bot deployed to Preview September 23, 2026 02:14 View deployment

Conversation

BillLeoutsakosvl346 commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Validation

Uh oh!

vercel Bot commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps Bot commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Confidence Score: 5/5

Summary

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

BillLeoutsakosvl346 commented Sep 18, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

BillLeoutsakosvl346 commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

BillLeoutsakosvl346 commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

BillLeoutsakosvl346 commented Sep 21, 2026

Before / after visual comparison

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 22, 2026

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 22, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

BillLeoutsakosvl346 commented Sep 18, 2026 •

edited

Loading

vercel Bot commented Sep 18, 2026 •

edited

Loading

greptile-apps Bot commented Sep 18, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading