[prettify] calendar takes whole screen, slot duration is 1h and creation selection is transparent

src/App.css

@@ -1,10 +1,9 @@
 .App {
   text-align: center;
-  font-family:"Roboto";
+  font-family: "Roboto";
+  height: 100vh;
 }
 
-
-
 .App-header {
   background-color: #282c34;
   min-height: 100vh;

src/components/Calendar/Calendar.css

@@ -4,12 +4,14 @@ main {
 }
 
 .calendar {
-  width: 100%;
+  flex-grow: 1;
-  height: 100%;
+  overflow: "hidden";
+  height: 90vh;
 }
 
 .sidebar {
   border-right: 2px gray;
+  width: 20vw;
 }
 
 .fc .fc-daygrid-day {
@@ -21,6 +23,31 @@ main {
   height: 60px !important; /* Default is ~40px */
 }
 
+.fc-timegrid-slot {
+  position: relative;
+}
+
+.fc-timegrid-slot::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  border-top: 1px dotted #ccc;
+  pointer-events: none;
+  z-index: 1;
+}
+.fc .fc-timegrid-slot-label {
+  display: flex;
+  align-items: flex-start;
+  padding-top: 2px;
+  height: 100%;
+}
+
+[data-theme="dark"] .fc-timegrid-slot::after {
+  border-top: 1px dotted rgba(255, 255, 255, 0.2);
+}
+
 #calendar {
   flex: 1;
   overflow: hidden; /* Important: let FullCalendar handle internal scroll */

src/components/Calendar/Calendar.tsx

@@ -218,9 +218,9 @@ export default function CalendarApp() {
           initialView="timeGridWeek"
           editable={true}
           selectable={true}
+          height={"100%"}
           select={handleDateSelect}
           nowIndicator
-          selectMirror={true}
           views={{
             timeGridWeek: { titleFormat: { month: "long", year: "numeric" } },
           }}
@@ -228,9 +228,8 @@ export default function CalendarApp() {
           events={filteredEvents}
           weekNumbers
           weekNumberFormat={{ week: "long" }}
-          slotDuration={"00:30:00"}
+          slotDuration={"01:00:00"}
-          slotLabelInterval={"00:30:00"}
+          scrollTime={"08:00:00"}
-          scrollTime={"09:00:00"}
           unselectAuto={false}
           allDayText=""
           slotLabelFormat={{

src/components/Menubar/Menubar.css

@@ -42,6 +42,7 @@
   padding: 0.5rem;
   width: 100%;
   z-index: 1000;
+  height: 7vh;
 }
 
 .menubar-item {