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:
parent
64a01d33ba
commit
4b05c56a0d
4 changed files with 17 additions and 10 deletions
|
@ -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}>
|
||||
"{booking.description}"
|
||||
</div>
|
||||
)}
|
||||
|
|
|
@ -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 && (
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue