Calendar sidebar: padding via MUI, sticky Create Event button; DateCalendar width 100%; Create button full width (#227)

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">
+      <Box
-        <Button
+        className="sidebar"
-          variant="contained"
+        sx={{
-          onClick={() =>
+          padding: "0 25px 16px",
-            eventHandlers.handleDateSelect(null as unknown as DateSelectArg)
+          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

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();