From c27a52f479048175df34798a4efccac09501550d Mon Sep 17 00:00:00 2001
From: lenhanphung <44486647+lenhanphung@users.noreply.github.com>
Date: Tue, 21 Oct 2025 17:16:08 +0700
Subject: [PATCH] Calendar sidebar: padding via MUI, sticky Create Event
 button; DateCalendar width 100%; Create button full width (#227)

---
 src/components/Calendar/Calendar.tsx     | 37 ++++++++++++++++++------
 src/components/Calendar/MiniCalendar.tsx |  1 +
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index bc4b9ac..48f0247 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar.tsx
@@ -27,6 +27,7 @@ import { createSelector } from "@reduxjs/toolkit";
 import AddIcon from "@mui/icons-material/Add";
 import { TempCalendarsInput } from "./TempCalendarsInput";
 import Button from "@mui/material/Button";
+import { Box } from "@mui/material";
 import {
   updateSlotLabelVisibility,
   eventToFullCalendarFormat,
@@ -263,15 +264,33 @@ export default function CalendarApp({
 
   return (
     <main className="main-layout">
-      <div className="sidebar">
-        <Button
-          variant="contained"
-          onClick={() =>
-            eventHandlers.handleDateSelect(null as unknown as DateSelectArg)
-          }
+      <Box
+        className="sidebar"
+        sx={{
+          padding: "0 25px 16px",
+          position: "relative",
+        }}
+      >
+        <Box
+          sx={{
+            position: "sticky",
+            top: 0,
+            zIndex: 10,
+            backgroundColor: "#fff",
+            paddingTop: "16px",
+          }}
         >
-          <AddIcon /> <p>Create Event</p>
-        </Button>
+          <Button
+            size="large"
+            variant="contained"
+            fullWidth
+            onClick={() =>
+              eventHandlers.handleDateSelect(null as unknown as DateSelectArg)
+            }
+          >
+            <AddIcon /> <p>Create Event</p>
+          </Button>
+        </Box>
 
         <MiniCalendar
           calendarRef={calendarRef}
@@ -292,7 +311,7 @@ export default function CalendarApp({
             setSelectedCalendars={setSelectedCalendars}
           />
         </div>
-      </div>
+      </Box>
       <div className="calendar">
         <ImportAlert />
         <FullCalendar
diff --git a/src/components/Calendar/MiniCalendar.tsx b/src/components/Calendar/MiniCalendar.tsx
index 9f12476..13dae5b 100644
--- a/src/components/Calendar/MiniCalendar.tsx
+++ b/src/components/Calendar/MiniCalendar.tsx
@@ -59,6 +59,7 @@ export function MiniCalendar({
           );
         }}
         views={["month", "day"]}
+        sx={{ width: "100%" }}
         slotProps={{
           day: (ownerState) => {
             const date = ownerState.day.toDate();