Fix marketplace filter select width

[vicksiyi]

Summary

• Give marketplace filter selects a stable fixed width.
• Truncate long selected values inside the select instead of letting them expand the control.
• Prevent long tag/type/framework selections from shifting adjacent filters.

Tests

• pnpm --dir packages/ui build

Notes

• Fixes Dropdown selection changes component width and causes layout wrapping #6518.

[gemini-code-assist]

Code Review

This pull request updates the styling of select dropdowns and filter controls in the Marketplace view, adding ellipsis overflow handling and changing the width of several filter components from 120px to 160px. The feedback suggests moving the getSelectStyles helper function outside of the component to prevent unnecessary recreations on render, and refactoring the hardcoded width of 160px into a shared constant or referencing an existing configuration property to avoid duplication.

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.

[gemini-code-assist]

The helper function getSelectStyles is defined inside the Marketplace component but does not depend on any component state or props (it only uses its parameters borderColor and isDarkMode). Defining it inside the component causes it to be recreated on every render. Moving it outside the Marketplace component (e.g., right below the MenuProps constant) is a more efficient and maintainable approach.

[vicksiyi]

Thanks, fixed in a26439b. I moved getSelectStyles out of the component so it is not recreated on each render.

[gemini-code-assist]

To avoid duplicating the magic number 160 across multiple FormControl components, you can reference the existing width defined in MenuProps.PaperProps.style.width. Alternatively, you can define a shared constant at the top of the file (e.g., const FILTER_WIDTH = 160) and use it consistently.

Suggested change

	width: 160
	width: MenuProps.PaperProps.style.width

[vicksiyi]

Thanks, fixed in a26439b. The filter controls now reuse MenuProps.PaperProps.style.width instead of repeating the literal width.

[gemini-code-assist]

To avoid duplicating the magic number 160 across multiple FormControl components, you can reference the existing width defined in MenuProps.PaperProps.style.width. Alternatively, you can define a shared constant at the top of the file (e.g., const FILTER_WIDTH = 160) and use it consistently.

Suggested change

	width: 160
	width: MenuProps.PaperProps.style.width

[vicksiyi]

Thanks, fixed in a26439b. The filter controls now reuse MenuProps.PaperProps.style.width instead of repeating the literal width.

[gemini-code-assist]

To avoid duplicating the magic number 160 across multiple FormControl components, you can reference the existing width defined in MenuProps.PaperProps.style.width. Alternatively, you can define a shared constant at the top of the file (e.g., const FILTER_WIDTH = 160) and use it consistently.

Suggested change

	width: 160
	width: MenuProps.PaperProps.style.width

[vicksiyi]

Thanks, fixed in a26439b. The filter controls now reuse MenuProps.PaperProps.style.width instead of repeating the literal width.