fix(ui): adjust dropdown icon right-gap in ComboBox and Select

[MartinS-git]

Closes #1639

Summary

• ComboBox: replaced offset approach (top-[1px]/h-[calc(100%-2px)]) with a full-height button that carries explicit borders (border-y, border-r, border-l-0), ensuring defaultButtonStyles/invalidButtonStyles/validButtonStyles are consistently applied
• ComboBox: fixed input text overlapping toggle button and valid/invalid icons by replacing static px-4 with dynamic right padding (pr-8 default, pr-16 when valid/invalid)
• Select: reduced toggle right padding (px-4 → pl-4 pr-2) for consistent chevron gap
• DataGridToolbar story: wrapped ComplexCustomLayout in PortalProvider so the ComboBox dropdown renders with correct theme styles in Storybook

Test plan

• Visual check in Storybook: ComboBox and Select dropdown icon aligned with Figma specs
• Verify all states: default, valid, invalid, disabled, loading, error
• Check that long input text does not overlap the toggle button or valid/invalid icons
• Check ComboBox dropdown menu renders correctly in DataGridToolbar ComplexCustomLayout story

[changeset-bot]

🦋 Changeset detected

Latest commit: ede80cc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@cloudoperators/juno-ui-components	Patch
@cloudoperators/juno-app-carbon	Patch
@cloudoperators/juno-app-doop	Patch
@cloudoperators/juno-app-example	Patch
@cloudoperators/juno-app-greenhouse	Patch
@cloudoperators/juno-app-heureka	Patch
@cloudoperators/juno-app-supernova	Patch
@cloudoperators/juno-app-template	Patch
@cloudoperators/juno-messages-provider	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://cloudoperators.github.io/juno/pr-preview/pr-1653/
Built to branch gh-pages at 2026-05-08 10:41 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[Copilot]

Pull request overview

This PR addresses a UI consistency issue in @cloudoperators/juno-ui-components by aligning the dropdown chevron right-gap in ComboBox and Select with the Figma specs, and ensuring the ComboBox portal renders with the correct theme styles in a specific Storybook story.

Changes:

• Updated Select toggle padding (px-4 → pl-4 pr-2) to reduce the chevron’s right-gap.
• Repositioned the ComboBox toggle button and adjusted validation icon container positioning to match the desired spacing.
• Wrapped DataGridToolbar’s ComplexCustomLayout story in PortalProvider to ensure portaled dropdown content is styled correctly in Storybook.

Reviewed changes

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

File	Description
packages/ui-components/src/components/Select/Select.component.tsx	Tweaks toggle padding to match chevron spacing to Figma.
packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.stories.tsx	Adds PortalProvider decorator so portaled dropdown renders with correct theme styles in Storybook.
packages/ui-components/src/components/ComboBox/ComboBox.component.tsx	Repositions toggle button and validation icon container to adjust right-gap.
.changeset/fix-dropdown-icon-gap.md	Adds changeset entry for a patch release of the spacing fix.

Comments suppressed due to low confidence (1)

packages/ui-components/src/components/ComboBox/ComboBox.component.tsx:117

• invalidButtonStyles / validButtonStyles only set jn:border-theme-*, but buttonStyles no longer includes any jn:border* classes. As a result, the border color classes on the toggle won’t have any visible effect. Either remove the invalid/valid toggle border styling entirely, or reintroduce an explicit border (width/sides) on the toggle if you still want the toggle edge to reflect valid/invalid state.

const invalidButtonStyles = `
  jn:border-theme-error
`

const validButtonStyles = `
  jn:border-theme-success
`

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

packages/ui-components/src/components/ComboBox/ComboBox.component.tsx:117

• invalidButtonStyles / validButtonStyles only set a border color, but buttonStyles no longer applies any border width/style. This makes those state style constants (and the juno-combobox-toggle-*(...) class concatenations) effectively no-ops. Consider either reintroducing a border on the toggle button (if it’s meant to visually share the input border) or removing these unused style constants to reduce confusion.

const invalidButtonStyles = `
  jn:border-theme-error
`

const validButtonStyles = `
  jn:border-theme-success
`