From 18e98a882866d77f5a9020767fce0764f2cb86e2 Mon Sep 17 00:00:00 2001
From: Riyadh <dev@tx.local>
Date: Wed, 20 May 2026 14:57:31 +0000
Subject: [PATCH] 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.
---
 artifacts/tx-os/src/pages/executive-meetings.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/artifacts/tx-os/src/pages/executive-meetings.tsx b/artifacts/tx-os/src/pages/executive-meetings.tsx
index fdc65b6a..dd3ae1bd 100644
--- a/artifacts/tx-os/src/pages/executive-meetings.tsx
+++ b/artifacts/tx-os/src/pages/executive-meetings.tsx
@@ -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>
   );