Simple undo/redo

src/assets/layout.css

@@ -9,13 +9,25 @@
 }
 
 /* Layout & typography */
-* { box-sizing: border-box }
+* {
+  box-sizing: border-box;
+}
 
-html, body { height: 100%; }
+html,
+body {
+  height: 100%;
+}
 
 body {
   margin: 0;
-  font: 500 14px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
+  font:
+    500 14px/1.2 ui-sans-serif,
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Inter,
+    Arial;
   background: var(--bg);
   color: var(--ink);
   /* Prevent body scrolling / unwanted scrollbars due to mobile browser UI chrome affecting vh */
@@ -23,38 +35,50 @@ body {
 }
 
 /* Ensure root app container doesn't introduce its own scrollbars */
-#app { height: 100%; width: 100%; overflow: hidden; }
+#app {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
 
 header {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  margin-bottom: .75rem;
+  margin-bottom: 0.75rem;
   flex-shrink: 0;
 }
 
 .header-controls {
   display: flex;
   align-items: center;
-  gap: .75rem;
+  gap: 0.75rem;
 }
 
-.today-date { cursor: pointer }
-.today-date::first-line { color: var(--today) }
-.today-button:hover { opacity: .8 }
+.today-date {
+  cursor: pointer;
+}
+.today-date::first-line {
+  color: var(--today);
+}
+.today-button:hover {
+  opacity: 0.8;
+}
 
 /* Header row */
-.calendar-header, #calendar-header {
+.calendar-header,
+#calendar-header {
   display: grid;
   grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
-  border-bottom: .2em solid var(--muted);
+  border-bottom: 0.2em solid var(--muted);
   align-items: last baseline;
   flex-shrink: 0;
   width: 100%;
 }
 
 /* Main container */
-.calendar-container, #calendar-container {
+.calendar-container,
+#calendar-container {
   flex: 1;
   overflow: hidden;
   position: relative;
@@ -63,7 +87,8 @@ header {
 }
 
 /* Viewports (support id or class) */
-.calendar-viewport, #calendar-viewport {
+.calendar-viewport,
+#calendar-viewport {
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
@@ -72,11 +97,16 @@ header {
   scrollbar-width: none;
 }
 .calendar-viewport::-webkit-scrollbar,
-#calendar-viewport::-webkit-scrollbar { display: none }
+#calendar-viewport::-webkit-scrollbar {
+  display: none;
+}
 
-.jogwheel-viewport, #jogwheel-viewport {
+.jogwheel-viewport,
+#jogwheel-viewport {
   position: absolute;
-  top: 0; right: 0; bottom: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
   width: var(--overlay-w);
   overflow-y: auto;
   overflow-x: hidden;
@@ -85,10 +115,19 @@ header {
   cursor: ns-resize;
 }
 .jogwheel-viewport::-webkit-scrollbar,
-#jogwheel-viewport::-webkit-scrollbar { display: none }
+#jogwheel-viewport::-webkit-scrollbar {
+  display: none;
+}
 
-.jogwheel-content, #jogwheel-content { position: relative; width: 100% }
-.calendar-content, #calendar-content { position: relative }
+.jogwheel-content,
+#jogwheel-content {
+  position: relative;
+  width: 100%;
+}
+.calendar-content,
+#calendar-content {
+  position: relative;
+}
 
 /* Week row: label + 7-day grid + jogwheel column */
 .week-row {
@@ -102,7 +141,8 @@ header {
 }
 
 /* Label cells */
-.year-label, .week-label {
+.year-label,
+.week-label {
   display: grid;
   place-items: center;
   width: 100%;
@@ -137,7 +177,8 @@ header {
   z-index: 15;
   overflow: visible;
   position: absolute;
-  top: 0; right: 0;
+  top: 0;
+  right: 0;
   width: 100%;
 }
 .month-name-label > span {