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

src/components/Calendar/Calendar.css

@@ -4,12 +4,14 @@ main {
 }
 
 .calendar {
-  width: 100%;
-  height: 100%;
+  flex-grow: 1;
+  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 */