From 68bff82a6567c43e3ef3ab3de71bdee8e420ba81 Mon Sep 17 00:00:00 2001
From: Igor Dykhta <igorDykhta@users.noreply.github.com>
Date: Fri, 17 Nov 2023 16:32:19 +0200
Subject: [PATCH] [fix] effect-related UI fixes (#2439)

---
 src/components/src/effects/effect-manager.tsx    |  2 +-
 src/components/src/effects/effect-panel.tsx      |  2 +-
 .../src/effects/effect-time-slider.tsx           |  6 ++++++
 src/utils/src/effect-utils.ts                    | 16 ++++++++--------
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/src/effects/effect-manager.tsx b/src/components/src/effects/effect-manager.tsx
index 5ac46b580a..67ef6bc9fe 100644
--- a/src/components/src/effects/effect-manager.tsx
+++ b/src/components/src/effects/effect-manager.tsx
@@ -57,7 +57,7 @@ type StyledEffectPanelContentProps = {
 };
 const StyledEffectPanelContent = styled.div<StyledEffectPanelContentProps>`
   ${props => props.theme.sidePanelScrollBar};
-  padding: ${props => (props.extended ? '32px' : '10px')};
+  padding: ${props => (props.extended ? '32px' : '10px 0px 10px 0px')};
   overflow: overlay;
   display: flex;
   flex-direction: column;
diff --git a/src/components/src/effects/effect-panel.tsx b/src/components/src/effects/effect-panel.tsx
index 919eb47d74..ff26e5846e 100644
--- a/src/components/src/effects/effect-panel.tsx
+++ b/src/components/src/effects/effect-panel.tsx
@@ -35,7 +35,7 @@ const PanelWrapper = styled.div<PanelWrapperProps>`
     cursor: move;
   }
   margin: 3px auto 3px 25px;
-  max-width: 275px;
+  max-width: 295px;
 `;
 
 EffectPanelFactory.deps = [EffectPanelHeaderFactory, EffectConfiguratorFactory];
diff --git a/src/components/src/effects/effect-time-slider.tsx b/src/components/src/effects/effect-time-slider.tsx
index 23e988bcde..0bf693ebdb 100644
--- a/src/components/src/effects/effect-time-slider.tsx
+++ b/src/components/src/effects/effect-time-slider.tsx
@@ -116,6 +116,12 @@ const RangeSliderWrapper = styled.div`
     height: 32px;
     width: 8px;
     margin-top: -14px;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+  .kg-range-slider__handle::after {
+    margin-left: 1px;
   }
   .kg-range-slider__input {
     height: 32px;
diff --git a/src/utils/src/effect-utils.ts b/src/utils/src/effect-utils.ts
index f311d2b30a..cb2ebc869d 100644
--- a/src/utils/src/effect-utils.ts
+++ b/src/utils/src/effect-utils.ts
@@ -21,16 +21,16 @@ export function computeDeckEffects({
   mapState: MapState;
 }): PostProcessEffect[] {
   // TODO: 1) deck effects per deck context 2) preserved between draws
-  let effects = visState.effectOrder
+  return visState.effectOrder
     .map(effectId => {
-      return findById(effectId)(visState.effects);
+      const effect = findById(effectId)(visState.effects) as Effect | undefined;
+      if (effect?.isEnabled && effect.deckEffect) {
+        updateEffect({visState, mapState, effect});
+        return effect.deckEffect;
+      }
+      return null;
     })
-    .filter(effect => Boolean(effect && effect.isEnabled && effect.deckEffect)) as Effect[];
-
-  return effects.map(effect => {
-    updateEffect({visState, mapState, effect});
-    return effect.deckEffect;
-  });
+    .filter(effect => effect);
 }
 
 /**