restyle all the things

components/LetterOptions.tsx

@@ -35,56 +35,73 @@ export default function LetterOptions(props: IProps) {
   ]
 
   return (
-    <div className="px-4 py-5 bg-white space-y-6 sm:p-6">
-      <Select
-        name="template"
-        text="Vorlage"
-        onchange={props.onChange}
-        value={props.template}
-        options={templateTypeOptions}
-      />
-
-      <TextAreaInput
-        name="address"
-        text="Adresse"
-        placeholder={EXAMPLE_ADDRESS}
-        onchange={props.onChange}
-        value={props.address}
-        styles="h-20"
-      />
-      <Input name="subject" text="Betreff" placeholder="Betreffzeile" onchange={props.onChange} value={props.subject} />
-      <TextAreaInput
-        name="body"
-        text="Brieftext"
-        onchange={props.onChange}
-        placeholder="Inhalt des Briefes"
-        value={props.body}
-      />
-      <Collapsible trigger="Bezugszeichenzeile">
-        <Input name="yourRef" text="Ihr Zeichen" onchange={props.onChange} value={props.yourRef} />
-        <Input name="yourMail" text="Ihr Schreiben vom" onchange={props.onChange} value={props.yourMail} />
-        <Input name="myRef" text="Unser Zeichen" onchange={props.onChange} value={props.myRef} />
-        <Input name="customer" text="Kundernummer" onchange={props.onChange} value={props.customer} />
-        <Input name="invoice" text="Rechnung" onchange={props.onChange} value={props.invoice} />
-      </Collapsible>
-      <Collapsible trigger="Sonstige Einstellungen">
-        <Input name="date" text="Datum" placeholder="Heute" onchange={props.onChange} value={props.date} />
-        <Input
-          name="opening"
-          text="Eröffnung"
-          placeholder="Sehr geehrte Damen und Herren"
+    <div className="grid grid-cols-6 gap-6 px-4 py-5 bg-white sm:p-6">
+      <div className="col-span-3">
+        <Select
+          name="template"
+          text="Vorlage"
           onchange={props.onChange}
-          value={props.opening}
+          value={props.template}
+          options={templateTypeOptions}
         />
-        <Input
-          name="closing"
-          text="Grußform"
-          placeholder="Mit freundlichen Grüßen"
+      </div>
+      <div className="col-span-3">
+        <TextAreaInput
+          name="address"
+          text="Adresse"
+          placeholder={EXAMPLE_ADDRESS}
           onchange={props.onChange}
-          value={props.closing}
+          value={props.address}
+          styles="h-20 col-span-2"
         />
-        <Input name="specialMail" text="Versandhinweis" onchange={props.onChange} value={props.specialMail} />
-      </Collapsible>
+      </div>
+      <div className="col-span-3">
+        <Input
+          name="subject"
+          text="Betreff"
+          placeholder="Betreffzeile"
+          onchange={props.onChange}
+          value={props.subject}
+        />
+      </div>
+      <div className="col-span-6">
+        <TextAreaInput
+          name="body"
+          text="Brieftext"
+          onchange={props.onChange}
+          placeholder="Inhalt des Briefes"
+          value={props.body}
+        />
+      </div>
+      <div className="col-span-3">
+        <Collapsible trigger="Bezugszeichenzeile">
+          <Input name="yourRef" text="Ihr Zeichen" onchange={props.onChange} value={props.yourRef} />
+          <Input name="yourMail" text="Ihr Schreiben vom" onchange={props.onChange} value={props.yourMail} />
+          <Input name="myRef" text="Unser Zeichen" onchange={props.onChange} value={props.myRef} />
+          <Input name="customer" text="Kundernummer" onchange={props.onChange} value={props.customer} />
+          <Input name="invoice" text="Rechnung" onchange={props.onChange} value={props.invoice} />
+        </Collapsible>
+      </div>
+      <div className="col-span-3">
+        <Collapsible trigger="Sonstige Einstellungen">
+          <Input name="date" text="Datum" placeholder="Heute" onchange={props.onChange} value={props.date} />
+          <Input
+            name="opening"
+            text="Eröffnung"
+            placeholder="Sehr geehrte Damen und Herren"
+            onchange={props.onChange}
+            value={props.opening}
+          />
+          <Input
+            name="closing"
+            text="Grußform"
+            placeholder="Mit freundlichen Grüßen"
+            onchange={props.onChange}
+            value={props.closing}
+          />
+          <Input name="specialMail" text="Versandhinweis" onchange={props.onChange} value={props.specialMail} />
+        </Collapsible>
+      </div>
     </div>
   )
 }