From cb3c23e9b0336054e8f18b067d5caad32a15caaf Mon Sep 17 00:00:00 2001
From: Egor Zaitsev <heuels@gmail.com>
Date: Wed, 14 Jul 2021 12:58:08 +0300
Subject: [PATCH 1/2] fix: truncate event type description instead of title

---
 pages/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 4cf03b6863..b19fbef8be 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -103,8 +103,8 @@ export default function Home(props) {
                         <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
                           <div className="truncate">
                             <div className="flex text-sm">
-                              <p className="font-medium text-blue-600 truncate">{type.title}</p>
-                              <p className="ml-1 flex-shrink-0 font-normal text-gray-500">
+                              <p className="flex-shrink-0 font-medium text-blue-600 truncate">{type.title}</p>
+                              <p className="ml-1 font-normal text-gray-500 truncate">
                                 in {type.description}
                               </p>
                             </div>

From 1dadf9f9a6ecf70b15481e8acefb9f84993b363d Mon Sep 17 00:00:00 2001
From: Egor Zaitsev <heuels@gmail.com>
Date: Wed, 14 Jul 2021 14:19:55 +0300
Subject: [PATCH 2/2] fix: same problem on the availability page

---
 pages/availability/index.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/pages/availability/index.tsx b/pages/availability/index.tsx
index ad18b232a2..0a8ad47112 100644
--- a/pages/availability/index.tsx
+++ b/pages/availability/index.tsx
@@ -121,7 +121,7 @@ export default function Availability(props) {
                 </div>
                 <div className="flex flex-col mb-8">
                     <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-                        <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+                        <div className="py-2 align-middle inline-block max-w-full min-w-full sm:px-6 lg:px-8">
                             <div className="shadow overflow-hidden border-b border-gray-200 rounded-lg">
                                 <table className="min-w-full divide-y divide-gray-200">
                                     <thead className="bg-gray-50">
@@ -143,7 +143,7 @@ export default function Availability(props) {
                                     <tbody className="bg-white divide-y divide-gray-200">
                                         {props.types.map((eventType) =>
                                             <tr>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 align-top">
                                                     {eventType.title}
                                                     {eventType.hidden &&
                                                         <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
@@ -151,13 +151,13 @@ export default function Availability(props) {
                                                         </span>
                                                     }
                                                 </td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                                <td className="px-6 py-4 text-sm text-gray-500 align-top">
                                                     {eventType.description}
                                                 </td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 align-top">
                                                     {eventType.length} minutes
                                                 </td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium align-top">
                                                     <Link href={"/" + props.user.username + "/" + eventType.slug}><a target="_blank" className="text-blue-600 hover:text-blue-900 mr-2">View</a></Link>
                                                     <Link href={"/availability/event/" + eventType.id}><a className="text-blue-600 hover:text-blue-900">Edit</a></Link>
                                                 </td>