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. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 5dabc2a6-6905-4d77-ba0d-f4edc783cb06 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/qrzw3bH Replit-Helium-Checkpoint-Created: true
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