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:
Riyadh
2026-05-20 14:57:31 +00:00
parent c34959ed0e
commit 18e98a8828
@@ -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>
);