InputRightElement is outside of input if there are 2+ elements inside

[FreePhoenix888]

Description

When I put 2 elements in RightInputElement the right elements goes outside of the input
I expect to have two elements at the right side of my input but the right elements is going outside of the input

Link to Reproduction

https://codesandbox.io/p/sandbox/elastic-montalcini-p4y87f

Steps to reproduce

1. Open Link to Reproduction and see

Chakra UI Version

2.8.2

Browser

Google Chrome Version 121.0.6167.160 (Official Build) (64-bit)

Operating System

• macOS
• Windows
• Linux

Additional Information

If I put elements in HStack nothing is changed. There is a question and answer about this problem: https://stackoverflow.com/a/75120814/13545849 but it suggets to set marginRight manually, I think it is just a workaround, not a solution. Material ui lets to do such things, it would be good if chakra would have ability to do this too

[mhamid3d]

The default width for input elements are equal to the height of the input. You have to manually change the width. For example use double the height of the input as the width:

<InputRightElement width="calc(var(--input-height) * 2)">