From 83822c777c7d6f754c2fdf1441dbff13e355de66 Mon Sep 17 00:00:00 2001
From: Heath Daniel <mr.heath.daniel@gmail.com>
Date: Tue, 27 Apr 2021 21:50:54 -0400
Subject: [PATCH] Fix calendar layout and adjust spacing

---
 pages/[user]/[type].tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx
index 1b9392e7..f49ffd64 100644
--- a/pages/[user]/[type].tsx
+++ b/pages/[user]/[type].tsx
@@ -67,11 +67,21 @@ export default function Type(props) {
         days.push(i);
     }
 
-    const calendar = days.map((day) =>
+    
+    // Create placeholder elements for empty days in first week
+    const weekdayOfFirst = dayjs().month(selectedMonth).date(1).day();
+    const emptyDays = Array(weekdayOfFirst).fill(null).map((day, i) => (
+      <div key={`e-${i}`} className={"text-center w-10 h-10 rounded-full mx-auto"}>
+          {null}
+      </div>
+    ));
+
+    // Combine placeholder days with actual days
+    const calendar = [...emptyDays, ...days.map((day) =>
         <button key={day} onClick={(e) => setSelectedDate(dayjs().tz(dayjs.tz.guess()).month(selectedMonth).date(day))} disabled={selectedMonth < dayjs().format('MM') && dayjs().month(selectedMonth).format("D") > day} className={"text-center w-10 h-10 rounded-full mx-auto " + (dayjs().isSameOrBefore(dayjs().date(day).month(selectedMonth)) ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-400 font-light') + (dayjs(selectedDate).month(selectedMonth).format("D") == day ? ' bg-blue-600 text-white-important' : '')}>
-            {day}
+          {day}
         </button>
-    );
+    )];
 
     // Handle date change
     useEffect(async () => {
@@ -132,7 +142,7 @@ export default function Type(props) {
 
             <main className={"mx-auto my-24 transition-max-width ease-in-out duration-500 " + (selectedDate ? 'max-w-6xl' : 'max-w-3xl')}>
                 <div className="bg-white overflow-hidden shadow rounded-lg md:max-h-96">
-                    <div className="sm:flex px-4 py-5 sm:p-6">
+                    <div className="sm:flex px-4 py-5 sm:p-4">
                         <div className={"pr-8 sm:border-r " + (selectedDate ? 'sm:w-1/3' : 'sm:w-1/2')}>
                             {props.user.avatar && <img src={props.user.avatar} alt="Avatar" className="w-16 h-16 rounded-full mb-4"/>}
                             <h2 className="font-medium text-gray-500">{props.user.name}</h2>