fix: few minor UI adjustments and fixes

src/components/piano-roll/PianoRoll.css

@@ -219,6 +219,21 @@
   font-weight: 700;
 }
 
+.piano-roll-toolbar .automation-toggle-button.active {
+  border-color: #e0e0e0;
+  border-right: 0;
+}
+
+.piano-roll-toolbar .automation-toggle-button.active:hover {
+  border-color: #f0f0f0;
+  border-right: 0;
+}
+
+.piano-roll-toolbar .automation-toggle-button.active:active {
+  border-color: #d6d6d6;
+  border-right: 0;
+}
+
 .piano-roll-toolbar .automation-type-dropdown {
   min-width: 92px;
   height: 20px;
@@ -318,6 +333,26 @@
   overflow-x: visible;
 }
 
+.piano-roll-body-shell {
+  display: flex;
+  min-height: 0;
+}
+
+.piano-roll-keys-viewport {
+  position: sticky;
+  left: 0;
+  z-index: 15;
+  width: var(--region-piano-key-width);
+  flex: 0 0 var(--region-piano-key-width);
+  overflow: hidden;
+  border-right: 1px solid #3a3a3a;
+  background-color: #252525;
+}
+
+.piano-roll-keys-offset {
+  will-change: transform;
+}
+
 .piano-roll-automation-section {
   flex: 0 0 50%;
   min-height: 0;
@@ -374,24 +409,19 @@
 .piano-roll-body {
   display: flex;
   min-height: calc(8 * 12 * var(--region-piano-key-height));
-  /* 8 octaves * 12 notes * piano key height */
-  width: calc(var(--max-number-of-bars) * var(--region-grid-bar-width) + var(--region-piano-key-width));
-  /* 32 bars * 160px width + piano keys width */
+  width: calc(var(--max-number-of-bars) * var(--region-grid-bar-width));
 }
 
 .piano-keys-container {
   width: var(--region-piano-key-width);
   flex-shrink: 0;
   overflow: hidden;
-  border-right: 1px solid #3a3a3a;
   background-color: #252525;
-  position: sticky;
-  left: 0;
-  z-index: 10;
 }
 
 .piano-grid-container {
   flex: 1;
+  width: 100%;
   min-width: calc(var(--max-number-of-bars) * var(--region-grid-bar-width));
   min-height: calc(8 * 12 * var(--region-piano-key-height));
   z-index: 5;
@@ -609,4 +639,4 @@
   color: #e0e0e0;
   min-width: 20px;
   text-align: center;
-}
+}