Improve layout alignment for form fields on smaller screens
Add `min-w-0` to `FormRow` component to prevent input fields from overlapping in RTL layouts and ensure proper column spanning on various screen sizes.
This commit is contained in:
@@ -7806,10 +7806,15 @@ function FormRow({
|
||||
: mobileFull
|
||||
? "col-span-2 sm:col-span-1"
|
||||
: "";
|
||||
// `min-w-0` is required so children with `w-full` (or intrinsic widths,
|
||||
// like iOS native `<input type="date">`) can't push the grid column
|
||||
// wider than its track. Without it, RTL grids on iPad landscape end up
|
||||
// with one cell overflowing across its neighbour. `w-full` on the
|
||||
// inner wrapper makes sure the input fills its column.
|
||||
return (
|
||||
<div className={span}>
|
||||
<div className={`${span} min-w-0`}>
|
||||
<Label className="text-xs text-gray-700">{label}</Label>
|
||||
<div className="mt-1">{children}</div>
|
||||
<div className="mt-1 w-full min-w-0">{children}</div>
|
||||
{hint && <p className="text-[11px] text-gray-500 mt-0.5">{hint}</p>}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user