Improve responsivity

src/letter/LetterBodyForm.astro

@@ -44,7 +44,7 @@ const letterText = renderText(lang, {
   </div>
   <div>
     <Button
-      class="flex w-full md:w-auto md:mx-auto lg:mx-0"
+      class="flex w-full md:w-auto md:mx-auto lg:mx-0 md:min-w-[260px]"
       type="button"
       disabled={!result.success}
       onclick="document.querySelector('#contact-details-dialog')?.showModal()"

src/letter/LetterOptionsForm.astro

@@ -33,9 +33,31 @@ const genderOptions: Record<Lang, Array<"f" | "n" | "m">> = {
 const genders = genderOptions[lang];
 ---
 
-<form id="letter-options" class="grid gap-8" novalidate>
+<form id="letter-options" class="grid md:grid-cols-2 lg:grid-cols-1 gap-8" novalidate>
   <Field required label={t("form.first_name")} name="firstName" />
   <Field required label={t("form.last_name")} name="lastName" />
+
+  <div>
+    <Label required class="mb-2" for="branch-input">
+      {t("form.branch")}
+    </Label>
+    <Select name="branch" id="branch-input" class="mb-6">
+      {
+        branches.map((branch) => {
+          return (
+            <option value={branch.id} selected={branch.id === defaultBranchId}>
+              {branch.data.name}
+              {lang === "en" ? <span>– {countries[branch.data.lang as Lang]}</span> : null}
+            </option>
+          );
+        })
+      }
+    </Select>
+    <Checkbox name="isClient">
+      {t("form.is_client")}
+    </Checkbox>
+  </div>
+
   {
     genders && genders.length > 0 && (
       <RadioGroup required label={t("form.gender")}>
@@ -50,24 +72,4 @@ const genders = genderOptions[lang];
       </RadioGroup>
     )
   }
-  <div>
-    <Label required class="mb-2" for="branch-input">
-      {t("form.branch")}
-    </Label>
-    <Select name="branch" id="branch-input">
-      {
-        branches.map((branch) => {
-          return (
-            <option value={branch.id} selected={branch.id === defaultBranchId}>
-              {branch.data.name}
-              {lang === "en" ? <span>– {countries[branch.data.lang as Lang]}</span> : null}
-            </option>
-          );
-        })
-      }
-    </Select>
-  </div>
-  <Checkbox name="isClient">
-    {t("form.is_client")}
-  </Checkbox>
 </form>

src/ui/Select.astro

@@ -3,11 +3,11 @@ import type { HTMLAttributes } from "astro/types";
 
 interface Props extends HTMLAttributes<"select"> {}
 
-const { ...props } = Astro.props;
+const { class: c, ...props } = Astro.props;
 ---
 
 <div class="relative text-black">
-  <select class="block w-full px-3 py-2 appearance-none text-xl" {...props}>
+  <select class:list={["block w-full px-3 py-2 appearance-none text-xl", c]} {...props}>
     <slot />
   </select>
   <svg