Circular dimensions for Autocomplete clear and popup indicators

[NSTKrishna]

Problem Description

The global MuiIconButton style overrides in Sistent unintentionally distort the clear (✕) and popup (▼) indicator buttons inside MuiAutocomplete components across consuming projects (like Meshery and Meshery Cloud). Because these internal indicator buttons inherit the global padding without explicit width/height constraints, they render as ovals rather than perfect circles, and their hover-state backgrounds overflow the input borders.

Solution

This PR introduces a specific style override for MuiAutocomplete in src/theme/components/autocomplete.modifier.ts to enforce a strict 28x28px dimension with a 50% border-radius and no box-shadow. This ensures that the clear and popup indicator buttons always render as perfect circles and stay cleanly within the input bounds, regardless of the global IconButton constraints.

Current Behavior

Screen.Recording.2026-07-01.at.6.59.05.PM.mov

Expected Behavior

Screen.Recording.2026-07-01.at.6.00.14.PM.mov

This PR fixes #

Signed commits

• Yes, I signed my commits.

[gemini-code-assist]

Code Review

This pull request registers and defines a new theme modifier for MuiAutocomplete, specifically customizing the clearIndicator and popupIndicator styles. The review feedback points out that because these indicators inherit global MuiIconButton padding, setting a fixed width and height of 28px without resetting the padding will squish the icons. It is recommended to explicitly set padding to 0 for both indicators.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[Copilot]

Pull request overview

This PR adds a targeted MUI theme override for MuiAutocomplete to prevent the clear (✕) and popup (▼) indicator buttons from inheriting icon-button padding in a way that distorts their shape in consuming apps.

Changes:

• Introduced a new MuiAutocomplete component modifier that forces the clear/popup indicator buttons to render as 28×28 circular buttons with no box shadow.
• Registered the new MuiAutocomplete override in the theme components map so it’s applied globally.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/theme/components/autocomplete.modifier.ts	Adds MuiAutocomplete style overrides for clearIndicator and popupIndicator to enforce circular dimensions.
src/theme/components.ts	Wires the new MuiAutocomplete modifier into the exported components theme configuration.