[ic-text-field] character count overflows line

[turing-llm1912]

Summary of the bug

ic-text-field character count overflows line when maxLength property is set.

🪜 How to reproduce

Instantiate an ICTextField component with the maxLength property set. The span containing the numb of characters written, and the max number of characters overflows the line.

Having had a look at the code in the repository the CSS class that is being applied to the span is charcount. This has margin-right property being set to a negitive value, margin-right: calc(-1 * var(--ic-space-xxxs));. I think that it is this negitive value for the margin-right causing it to overflow.

I adjusted the calculated value in the browser's dev tool to a non-negitive value and it fixed the margin/overflow problem.

I would propose simply to adjust the .charcount css in the ic-text-field.css from margin-right: calc(-1 * var(--ic-space-xxxs)); to var(--ic-space-xxxs)

📸 Screenshots or code

Current

With CSS adjustment

🖥 📱 Device

• Type: Desktop
• Device: AWS Remote Desktop running on Macbook Pro 16 Inch, 2019. Host OS Sequoia 15.3
• OS version: Ubuntu Mate 1.24.1
• Browser version: 122.0.6261.128 (Official Build) (64-bit)

🧐 Expected behaviour

No overflow of span element with ID ${inputId}-charcount

Additional info

Using the react component version of the component.

I haven't raised a PR at the moment as I am not sure if this is totally the right fix. However I am happy to raise a PR if the proposed fix seems reasonable.

[ad9242]

@turing-llm1912 Are you able to provided an example of how\where this problem occurs, as we have not been able to recreate? Changing that margin as you suggest would mean that the text no longer aligns with the right edge of the input field, so would require design approval before we could consider it.

[turing-llm1912]

Thank you for your response. I'd like to clarify that the current implementation using margin-right: calc(-1 * var(--ic-space-xxxs)) creates a negative margin, which causes the element to extend beyond its container boundaries on the right side. This negative margin is creating alignment issues in our implementation.

What we're looking to achieve is proper alignment with the input field edge while maintaining consistent spacing with our design system's spacing variables. As shown in the screenshots I've shared, this negative margin approach produces inconsistent results depending on the parent container's properties. In different contexts within our application, the same component appears differently because:

• Parent containers with different overflow settings might clip the extended element
• When used within flex or grid layouts, the negative margin interacts unpredictably with alignment properties
• On different screen sizes, the negative spacing creates varying visual effects

I'm currently finalizing a simple demo that reproduces these issues consistently and will share it shortly to help illustrate the problem more clearly. Trying to wangle time to do it is my hurdle to cross at the moment.

I understand the need for design approval before making changes and appreciate your consideration of this adjustment.

[mi6-577]

In Figma and Storybook, it looks like this ticket has been resolved.

Storybook;

Propose we close this ticket now.

[MI6-255]

We have changed the code since and believe this is resolved, closing it but please re-open if it is still an issue.