style: tweaks to editor (#738)

apps/client/src/features/rundown/Rundown.module.scss

@@ -7,9 +7,8 @@
   margin-top: 1em;
   display: flex;
   flex-direction: column;
-  padding: 0 4px;
+  padding-right: 4px; // size of scrollbar
   overflow-y: scroll;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
   height: 100%;
 }
 

apps/client/src/features/rundown/RundownExport.module.scss

@@ -1,12 +1,8 @@
 @use '../editors//EditorMixin' as editor;
 
-$rundown-width: 44.5rem;
-$editor-width: 25rem;
-
 .rundownExport {
-  grid-area: rundown;
-  max-height: 100%;
   height: 100%;
+  flex: 1;
 }
 
 .rundown {
@@ -24,17 +20,26 @@ $editor-width: 25rem;
 .list {
   @include editor.panel;
   height: inherit;
+  padding-left: 0;
   box-shadow: $box-shadow-right;
-  min-width: $rundown-width;
+
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 38rem;
+  max-width: 45rem;
 }
 
 .side {
+  max-height: 100%;
+  max-width: 45rem;
   margin: 2rem 0;
   padding: 1rem;
+  padding-right: 0;
   background-color: $gray-1325;
   border-radius: 0 8px 8px 0;
-  min-width: $editor-width;
-  flex: 1;
-  max-height: 100%;
-  overflow: auto;
+
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 30rem;
+  max-width: 45rem;
 }

apps/client/src/features/rundown/_blockMixins.scss

@@ -1,11 +1,13 @@
 @use '../../theme/ontimeColours' as *;
 @use '../../theme/ontimeStyles' as *;
 
+$block-width: 33rem;
+
 $block-gap: 0.25rem;
 $block-element-spacing: 0.25rem;
 $block-binder-width: 2rem;
 $block-clearance: 0.5rem;
-$block-border-radius: 0.5rem;
+$block-border-radius: 3px;
 $block-text-color: $gray-50;
 $block-bg: $gray-1250;
 $block-bg2: $gray-1050; // for delay and blocks
@@ -21,6 +23,8 @@ $block-cursor-color: $blue-400;
   margin: 0.25rem 0.125rem;
   position: relative;
   color: $block-text-color;
+
+  min-width: $block-width;
 }
 
 @mixin block-spacing() {

apps/client/src/features/rundown/delay-block/DelayBlock.module.scss

@@ -6,7 +6,6 @@
 
   background-color: $block-bg2;
 
-  min-width: 34rem;
   display: grid;
   grid-template-columns: 2rem 1fr auto;
   grid-template-areas: 'drag inpt btns';

apps/client/src/features/rundown/event-block/EventBlock.module.scss

@@ -29,7 +29,7 @@ $skip-opacity: 0.1;
   }
 
   &.selected {
-    background-color: $gray-1350;
+    background-color: $gray-1325;
   }
 
   &.play {
@@ -123,15 +123,12 @@ $skip-opacity: 0.1;
 .eventTimers {
   grid-area: times;
   display: flex;
-  align-items: center;
   gap: $block-clearance;
   height: 100%;
 
   .timerNote {
-    display: grid;
-    place-content: center;
     color: $blue-500;
-    margin-right: 0.5em;
+    margin-right: $block-clearance;
     font-size: 1.5em;
   }
 }
@@ -145,9 +142,7 @@ $skip-opacity: 0.1;
 
 .eventActions {
   grid-area: actions;
-  display: flex;
-  gap: $block-clearance;
-  justify-content: flex-end;
+  height: 100%;
 }
 
 .progressBg {

apps/client/src/features/rundown/event-block/RundownIndicators.tsx

@@ -24,7 +24,7 @@ function formatOverlap(previousEnd: number | null, timeStart: number): string |
 
   const overlapString = removeLeadingZero(millisToString(Math.abs(overlap)));
 
-  return `${overlap > 0 ? 'Overlap' : 'Gap'}: ${overlapString}`;
+  return `${overlap > 0 ? 'Overlap' : 'Gap'} ${overlapString}`;
 }
 
 export default function RundownIndicators(props: RundownIndicatorProps) {

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

@@ -1,20 +1,23 @@
 .eventEditor {
+  color: $label-gray;
   max-height: 100%;
   overflow-y: auto;
-  flex: 1;
+  padding: 0.5rem;
 
   display: flex;
   flex-direction: column;
+  overflow-x: auto;
 }
 
 .content {
-  padding: 1rem;
+  padding-right: 4px;
 
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 2rem;
   overflow-y: auto;
+
 }
 
 .footer {
@@ -53,7 +56,7 @@
   color: $label-gray;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem;
   max-width: max-content;
   cursor: pointer;
 }