From 83dbd44b0c1960f81cdfd34755b1e639c44c510a Mon Sep 17 00:00:00 2001
From: Aaron Lee <aaron.lee@gusto.com>
Date: Tue, 23 Jun 2026 17:14:55 -0400
Subject: [PATCH] refactor(StateTaxes): flatten form layout into a single
 evenly-spaced stack

Drops the per-requirement-set heading and effective-date subtext, and renders
every input as a sibling of one outer Flex with gap={20}. flatMap concatenates
requirements across sets so spacing is uniform across the form.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../StateTaxes/StateTaxesForm/Form.tsx        | 48 +++++++------------
 1 file changed, 16 insertions(+), 32 deletions(-)

diff --git a/src/components/Company/StateTaxes/StateTaxesForm/Form.tsx b/src/components/Company/StateTaxes/StateTaxesForm/Form.tsx
index 1012eb80a..d70318928 100644
--- a/src/components/Company/StateTaxes/StateTaxesForm/Form.tsx
+++ b/src/components/Company/StateTaxes/StateTaxesForm/Form.tsx
@@ -1,42 +1,26 @@
-import { useTranslation } from 'react-i18next'
-import { Fragment } from 'react/jsx-runtime'
 import { useStateTaxesForm } from './context'
 import { toRhfKey } from './rhfKey'
 import { QuestionInput } from '@/components/Common/TaxInputs/TaxInputs'
-import { useLocaleDateFormatter } from '@/contexts/LocaleProvider/useLocale'
-import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
+import { Flex } from '@/components/Common/Flex/Flex'
 
 /** @internal */
 export function Form() {
-  const { t } = useTranslation('Company.StateTaxes', { keyPrefix: 'form' })
-  const dateFormatter = useLocaleDateFormatter()
   const { stateTaxRequirements } = useStateTaxesForm()
-  const Components = useComponentContext()
 
-  return stateTaxRequirements.requirementSets?.map(
-    ({ requirements, label, effectiveFrom, key }) => (
-      <Fragment key={key}>
-        <div>
-          <Components.Heading as="h3">{label}</Components.Heading>
-          {effectiveFrom && (
-            <Components.Text size="sm">
-              {t('effectiveFromLabel', { date: dateFormatter.format(new Date(effectiveFrom)) })}
-            </Components.Text>
-          )}
-        </div>
-        {requirements?.map(requirement => {
-          return (
-            <QuestionInput
-              requirement={{
-                ...requirement,
-                key: `${key}.${toRhfKey(requirement.key as string)}`,
-              }}
-              questionType={requirement.metadata?.type ?? 'Text'}
-              key={requirement.key}
-            />
-          )
-        })}
-      </Fragment>
-    ),
+  return (
+    <Flex flexDirection="column" gap={20}>
+      {stateTaxRequirements.requirementSets?.flatMap(({ requirements, key }) =>
+        requirements?.map(requirement => (
+          <QuestionInput
+            key={`${key}.${requirement.key}`}
+            requirement={{
+              ...requirement,
+              key: `${key}.${toRhfKey(requirement.key as string)}`,
+            }}
+            questionType={requirement.metadata?.type ?? 'Text'}
+          />
+        )),
+      )}
+    </Flex>
   )
 }