From d32d8ea4c34399a46bb85125943f89dc3a57fcb9 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Sun, 8 Aug 2021 17:46:21 +0200
Subject: [PATCH] more minor styling changes to booking

---
 components/booking/DatePicker.tsx | 8 +++++---
 pages/[user]/[type].tsx           | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx
index 8fa66ac4..e840a9bd 100644
--- a/components/booking/DatePicker.tsx
+++ b/components/booking/DatePicker.tsx
@@ -166,8 +166,10 @@ const DatePicker = ({
   return selectedMonth ? (
     <div
       className={
-        "mt-8 sm:mt-0 " +
-        (selectedDate ? "sm:w-1/3 sm:border-r sm:dark:border-black sm:px-4" : "sm:w-1/2 sm:pl-4")
+        "mt-8 sm:mt-0 min-w-[350px] " +
+        (selectedDate
+          ? "w-full sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-black sm:pl-4 sm:pr-6"
+          : "sm:w-1/2 sm:pl-4")
       }>
       <div className="flex text-gray-600 font-light text-xl mb-4 ml-2">
         <span className="w-1/2 text-gray-600 dark:text-white">
@@ -191,7 +193,7 @@ const DatePicker = ({
           </button>
         </div>
       </div>
-      <div className="grid grid-cols-7 gap-y-4 text-center">
+      <div className="grid grid-cols-7 gap-4 text-center">
         {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
           .sort((a, b) => (weekStart.startsWith(a) ? -1 : weekStart.startsWith(b) ? 1 : 0))
           .map((weekDay) => (
diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx
index 8b2787b9..5c750fc0 100644
--- a/pages/[user]/[type].tsx
+++ b/pages/[user]/[type].tsx
@@ -129,7 +129,7 @@ export default function Type(props): Type {
         <main
           className={
             "mx-auto my-0 sm:my-24 transition-max-width ease-in-out duration-500 " +
-            (selectedDate ? "max-w-6xl" : "max-w-3xl")
+            (selectedDate ? "max-w-5xl" : "max-w-3xl")
           }>
           <div className="dark:bg-neutral-900 bg-white border border-gray-200 rounded-sm dark:border-0">
             <div className="sm:flex px-4 py-5 sm:p-4">
@@ -148,7 +148,7 @@ export default function Type(props): Type {
                 </p>
 
                 <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
-                  <Collapsible.Trigger className="text-gray-500 mb-1 px-2 py-1 -ml-2">
+                  <Collapsible.Trigger className="text-gray-500 mb-1 px-2 py-1 -ml-2 text-left min-w-32 ">
                     <GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                     {timeZone()}
                     {isTimeOptionsOpen ? (