From a35ac3487b21b5478d2e24b9d86448522c0c27d9 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Mon, 2 Aug 2021 18:54:27 +0200
Subject: [PATCH] fixed layout for bookings on mobile

---
 pages/bookings/index.tsx | 34 +++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/pages/bookings/index.tsx b/pages/bookings/index.tsx
index 3ed8272c..5ad51831 100644
--- a/pages/bookings/index.tsx
+++ b/pages/bookings/index.tsx
@@ -32,7 +32,7 @@ export default function Bookings({ bookings }) {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Shell heading="Bookings" subtitle="See upcoming and past events booked through your event type links.">
-        <div className="flex flex-col">
+        <div className="-mx-4 sm:mx-auto flex flex-col">
           <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="shadow overflow-hidden border-b border-gray-200 sm:rounded-sm">
@@ -43,10 +43,7 @@ export default function Bookings({ bookings }) {
                       .concat(bookings.filter((booking) => booking.confirmed || booking.rejected))
                       .map((booking) => (
                         <tr key={booking.id}>
-                          <td
-                            className={
-                              "px-6 py-4 whitespace-nowrap" + (booking.rejected ? " line-through" : "")
-                            }>
+                          <td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
                             {!booking.confirmed && !booking.rejected && (
                               <span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
                                 Unconfirmed
@@ -56,13 +53,20 @@ export default function Bookings({ bookings }) {
                               {booking.attendees[0].name}
                             </div>
                             <div className="text-sm text-gray-500">{booking.attendees[0].email}</div>
+                            <div
+                              style={{ maxWidth: 150 }}
+                              className="block lg:hidden font-medium text-xs text-gray-900 truncate">
+                              {booking.title}
+                            </div>
                           </td>
                           <td
                             className={
                               "px-6 py-4 max-w-20 w-full" + (booking.rejected ? " line-through" : "")
                             }>
-                            <div className="text-sm text-neutral-900 font-medium">{booking.title}</div>
-                            <div className="text-sm text-neutral-500">
+                            <div className="hidden lg:block text-sm text-neutral-900 font-medium">
+                              {booking.title}
+                            </div>
+                            <div className="hidden lg:block text-sm text-neutral-500">
                               You and {booking.attendees[0].name}
                             </div>
                           </td>
@@ -74,28 +78,28 @@ export default function Bookings({ bookings }) {
                           <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                             {!booking.confirmed && !booking.rejected && (
                               <>
-                                <a
+                                <button
                                   onClick={() => confirmBookingHandler(booking, true)}
-                                  className="cursor-pointer text-blue-600 hover:text-blue-900">
+                                  className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
                                   Confirm
-                                </a>
-                                <a
+                                </button>
+                                <button
                                   onClick={() => confirmBookingHandler(booking, false)}
-                                  className="cursor-pointer ml-4 text-blue-600 hover:text-blue-900">
+                                  className="text-xs sm:text-sm ml-4 inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
                                   Reject
-                                </a>
+                                </button>
                               </>
                             )}
                             {booking.confirmed && !booking.rejected && (
                               <>
                                 <a
                                   href={window.location.href + "/../cancel/" + booking.uid}
-                                  className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2">
+                                  className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
                                   Cancel
                                 </a>
                                 <a
                                   href={window.location.href + "/../reschedule/" + booking.uid}
-                                  className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2">
+                                  className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
                                   Reschedule
                                 </a>
                               </>