starred/webmail
1
0
Fork 0
mirror of https://github.com/bulwarkmail/webmail.git synced 2026-11-04 16:14:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: show the whole phone number and email address in the contact form in a narrow pane

Browse Source
This commit is contained in:
Linus Rath
2026-11-03 05:28:26 +01:00
parent 3bcd10b95f
commit 8931e4ad48
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/contacts/contact-form.tsx
+8 -7
View File
@@ -873,10 +873,10 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
{/* Email */}
<FormSection icon={Mail} title={t("email")}>
<div className="space-y-2">
<div className="space-y-2 @container">
{emails.map((entry, i) => (
<div key={i}>
<div className="flex items-center gap-2">
<div className="flex flex-wrap @md:flex-nowrap items-center gap-2">
<Input
type="email"
inputMode="email"
@@ -894,7 +894,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
aria-label={t("email")}
aria-invalid={emailErrors[i] ? true : undefined}
aria-describedby={emailErrors[i] ? fieldId(`email-error-${i}`) : undefined}
className={cn("flex-1", emailErrors[i] && "border-destructive focus-visible:border-destructive")}
className={cn("grow basis-full @md:basis-0", emailErrors[i] && "border-destructive focus-visible:border-destructive")}
/>
<Select
value={entry.context}
@@ -929,9 +929,10 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
{/* Phone */}
<FormSection icon={Phone} title={t("phone")}>
<div className="space-y-2">
<div className="space-y-2 @container">
{/* In a narrow pane the number takes a line of its own: beside the two selects it was cut to two digits. */}
{phones.map((entry, i) => (
<div key={i} className="flex items-center gap-2">
<div key={i} className="flex flex-wrap @md:flex-nowrap items-center gap-2">
<Input
type="tel"
inputMode="tel"
@@ -943,7 +944,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
}}
placeholder={t("phone_placeholder")}
aria-label={t("phone")}
className="flex-1"
className="grow basis-full @md:basis-0"
/>
<Select
value={entry.feature}
@@ -952,7 +953,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
next[i] = { ...next[i], feature: e.target.value as PhoneEntry["feature"] };
setPhones(next);
}}
className="w-[5.5rem]"
className="w-28"
aria-label={t("phone_type")}
>
<option value="">{t("phone_type")}</option>