cleanup

- style tweaks
- container follows cursor

client/src/features/editors/list/EventList.jsx

@@ -75,9 +75,18 @@ export default function EventList(props) {
     };
   }, [socket]);
 
+  // attach cursor to selected
+  useEffect(() => {
+    if (cursorSettings !== 'locked' || selected == null) return;
+    if (selected.index == null) return;
+
+    setCursor(selected.index);
+  }, [selected, cursorSettings]);
+
   // attach scroll to cursor
   useEffect(() => {
     if (cursor == null || cursorRef.current == null) return;
+    console.log('debug cursor scrolling');
 
     cursorRef.current.scrollIntoView({
       behavior: 'smooth',
@@ -86,13 +95,6 @@ export default function EventList(props) {
     });
   }, [cursor, cursorRef]);
 
-  useEffect(() => {
-    if (cursorSettings !== 'locked' || selected == null) return;
-    if (selected.index == null) return;
-
-    setCursor(selected.index);
-  }, [selected, cursorSettings]);
-
   if (events.length < 1) {
     return <Empty text='No Events' />;
   }
@@ -129,14 +131,16 @@ export default function EventList(props) {
               ref={provided.innerRef}
             >
               {events.map((e, index) => {
+                let isCursor = cursor === index;
                 if (index === 0) cumulativeDelay = 0;
                 if (e.type === 'delay' && e.duration != null) {
                   cumulativeDelay += e.duration;
                 } else if (e.type === 'block') cumulativeDelay = 0;
                 return (
                   <div
+                    ref={isCursor ? cursorRef : undefined}
                     key={e.id}
-                    className={cursor === index ? style.cursor : 'undefined'}
+                    className={isCursor ? style.cursor : undefined}
                   >
                     <EventListItem
                       type={e.type}

client/src/features/editors/list/List.module.css

@@ -24,12 +24,11 @@
   width: 100%;
   background: linear-gradient(
     180deg,
-    #ff7597 0%,
+    #ff7597 2%,
-    #0000 10%,
+    #0001 3%,
-    #0000 90%,
+    #0001 97%,
-    #ff7597 100%
+    #ff7597 98%
   );
-  border-radius: 20px;
+
-  transition: 0.3s;
+  border-radius: 14px;
-  transition-property: all;
 }