mythic-insight/calcom
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Fixes custom input overflow (#920)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/booking/BookingListItem.tsx
View file

@ -27,7 +27,7 @@ function BookingListItem(booking: BookingItem) {
}, },
{ {
async onSettled() { async onSettled() {
await utils.invalidateQuery(["viewer.bookings"]); await utils.invalidateQueries(["viewer.bookings"]);
}, },
} }
); );
@ -101,7 +101,7 @@ function BookingListItem(booking: BookingItem) {
{booking.title} {booking.title}
</div> </div>
{booking.description && ( {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; &quot;{booking.description}&quot;
</div> </div>
)} )}

4
components/eventtype/EventTypeList.tsx
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"> <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}> <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> <div>
<span className="font-medium truncate text-neutral-900">{type.title}</span> <span className="font-medium truncate text-neutral-900">{type.title}</span>
{type.hidden && ( {type.hidden && (

18
pages/event-types/[type].tsx
View file

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

1
public/static/locales/en/common.json
View file

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