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
	
	 Omar López
						Omar López