From 18674840326261ee2edf438aaa47639b75fe60d8 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Sat, 12 Apr 2025 12:46:01 -0400
Subject: [PATCH] fix: improve-responsiveness

---
 src/components/Form/FormWrapper.tsx | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index 8456e2bd..32c84a0d 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -20,17 +20,16 @@ export const FieldWrapper = ({
 }: FieldWrapperProps) => (
   <div className="pt-6 sm:pt-5">
     <fieldset aria-labelledby="label-notifications">
-      <div className="sm:grid sm:grid-cols-3 sm:items-baseline sm:gap-4">
+      {/* first column = labels/heading, second column = fields, third column = gutter  */}
+      <div className="grid md:grid-cols-[1fr_2fr] lg:grid-cols-[1fr_2fr_1fr] sm:items-baseline gap-4">
         <Label htmlFor={fieldName}>{label}</Label>
-        <div className="sm:col-span-2">
-          <div className="max-w-lg">
-            <p className="text-sm text-slate-500">{description}</p>
-            <p hidden={valid ?? true} className="text-sm text-red-500">
-              {validationText}
-            </p>
-            <div className="mt-4 space-y-4">
-              <div className="flex items-center">{children}</div>
-            </div>
+        <div className="max-w-3xl">
+          <p className="text-sm text-slate-500">{description}</p>
+          <p hidden={valid ?? true} className="text-sm text-red-500">
+            {validationText}
+          </p>
+          <div className="mt-4 space-y-4 sm:col-span-2">
+            <div className="flex items-center">{children}</div>
           </div>
         </div>
       </div>