Input group missing border radius styles #3558
Description
Current Behavior
Continuation of #3439 (comment)
I can see the corners of the input field being cut off when highlighting it. I added the following styles to resolve the issue:
.input-group > .ig-input:first-child {
border-top-left-radius: var(--radius-base);
border-bottom-left-radius: var(--radius-base);
}
.input-group > .ig-input:last-child {
border-top-right-radius: var(--radius-base);
border-bottom-right-radius: var(--radius-base);
}
It's very subtle, but visible non the less.
Expected Behavior
Border of the highlight to curve with the field
Steps To Reproduce
Here's the reproduction from the screenshot:
<div class="flex flex-col gap-12">
<label class="label">
<span class="label-text">Regular input</span>
<input class="input" type="text" />
</label>
<label class="label">
<span class="label-text">Group input</span>
<div class="input-group grid-cols-[auto_1fr]">
<div class="ig-cell preset-tonal">Group</div>
<input class="ig-input" type="text" />
</div>
</label>
</div>
Link to Reproduction / Stackblitz
No response
Environment Information
No response
More Information
No response