refactor: improve section style and composition

apps/client/src/features/rundown/event-editor/EventEditor.module.scss

@@ -1,8 +1,7 @@
 .eventEditor {
-  color: $label-gray;
   max-height: 100%;
   overflow-y: auto;
-  padding: 0.5rem;
+  padding-inline: 0.5rem;
 
   display: flex;
   flex-direction: column;
@@ -16,7 +15,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 1.5rem;
   overflow-y: auto;
 }
 
@@ -30,19 +29,22 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  margin-top: 0.5rem;
+
+  h3 {
+    margin-bottom: -0.5rem; // bring the title closer to the section elements
+  }
 }
 
 .decorated {
   color: var(--decorator-color, $ui-white);
   background-color: var(--decorator-bg, $gray-1100);
   width: fit-content;
-  padding: 0 0.5rem;
-  border-radius: 2px;
+  padding-inline: 0.5rem;
+  border-radius: $component-border-radius-sm;
 }
 
 .delayLabel {
-  font-size: calc(1rem - 3px);
+  font-size: $aux-text-size;
   color: $ontime-delay-text;
 
   &::after {
@@ -56,7 +58,8 @@
   gap: 0.5rem;
   max-width: max-content;
   cursor: pointer;
-  height: 30px; // manually match the height of a text input
+  height: 2rem; // manually match the height of a text input
+  margin-bottom: 0; // reset margin from label component
 }
 
 .inline {
@@ -68,6 +71,13 @@
 .splitTwo {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  column-gap: 1.5rem;
+  column-gap: 1rem;
   row-gap: 1rem;
 }
+
+.tooltipIcon {
+  color: $blue-500;
+  display: inline-block;
+  font-size: 1.25em;
+  margin-left: 0.25em;
+}