Fixes custom input overflow (#920)

* Fixes custom input overflow

* Truncates also placeholder

* Adds title attributes in booking notes and event descriptions
This commit is contained in:
Omar López 2021-10-12 12:59:52 -06:00 committed by GitHub
parent 64a01d33ba
commit 4b05c56a0d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 10 deletions

View file

@ -27,7 +27,7 @@ function BookingListItem(booking: BookingItem) {
},
{
async onSettled() {
await utils.invalidateQuery(["viewer.bookings"]);
await utils.invalidateQueries(["viewer.bookings"]);
},
}
);
@ -101,7 +101,7 @@ function BookingListItem(booking: BookingItem) {
{booking.title}
</div>
{booking.description && (
<div className="text-sm text-neutral-600 truncate max-w-60 md:max-w-96">
<div className="text-sm text-neutral-600 truncate max-w-60 md:max-w-96" title={booking.description}>
&quot;{booking.description}&quot;
</div>
)}

View file

@ -47,7 +47,9 @@ const EventTypeList = ({ readOnly, types, profile }: Props): JSX.Element => {
)}>
<div className="flex items-center justify-between w-full px-4 py-4 sm:px-6 hover:bg-neutral-50">
<Link href={"/event-types/" + type.id}>
<a className="flex-grow text-sm truncate">
<a
className="flex-grow text-sm truncate"
title={`${type.title} ${type.description ? ` ${type.description}` : ""}`}>
<div>
<span className="font-medium truncate text-neutral-900">{type.title}</span>
{type.hidden && (

View file

@ -662,20 +662,24 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</label>
</div>
<div className="w-full">
<ul className="mt-1 w-max">
<ul className="mt-1">
{customInputs.map((customInput: EventTypeCustomInput, idx: number) => (
<li key={idx} className="p-2 mb-2 border bg-secondary-50">
<div className="flex justify-between">
<div>
<div>
<span className="ml-2 text-sm">
<div className="flex-1 w-0">
<div className="truncate">
<span
className="ml-2 text-sm"
title={`${t("label")}: ${customInput.label}`}>
{t("label")}: {customInput.label}
</span>
</div>
{customInput.placeholder && (
<div>
<span className="ml-2 text-sm">
Placeholder: {customInput.placeholder}
<div className="truncate">
<span
className="ml-2 text-sm"
title={`${t("placeholder")}: ${customInput.placeholder}`}>
{t("placeholder")}: {customInput.placeholder}
</span>
</div>
)}

View file

@ -193,6 +193,7 @@
"meeting_with_user": "Meeting with {USER}",
"additional_inputs": "Additional Inputs",
"label": "Label",
"placeholder": "Placeholder",
"type": "Type",
"edit": "Edit",
"add_input": "Add an Input",