Merge pull request #572 from danditomaso/fix/improve-responsiveness

Improve form responsiveness

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>