From 6154b837207e12762d55566138ab06850b2d0dd7 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Mon, 1 May 2023 15:05:39 -0400
Subject: [PATCH] Fix custom gradient keyboard mode

---
 stylesheets/components/ChatColorPicker.scss |  4 ++++
 ts/components/GradientDial.tsx              | 14 +++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/stylesheets/components/ChatColorPicker.scss b/stylesheets/components/ChatColorPicker.scss
index 0680f8c5ca58..589b5b342261 100644
--- a/stylesheets/components/ChatColorPicker.scss
+++ b/stylesheets/components/ChatColorPicker.scss
@@ -20,6 +20,10 @@
     }
   }
 
+  &__modal__body.module-Modal__body {
+    overflow-x: hidden;
+  }
+
   &__bubbles {
     align-items: center;
     display: grid;
diff --git a/ts/components/GradientDial.tsx b/ts/components/GradientDial.tsx
index 56b250e5fb2a..445504ee9cc1 100644
--- a/ts/components/GradientDial.tsx
+++ b/ts/components/GradientDial.tsx
@@ -244,17 +244,21 @@ export function GradientDial({
   };
 
   const handleKeyDown = (ev: KeyboardEvent) => {
-    let add = 1;
-
     if (ev.key === 'ArrowDown' || ev.key === arrow('start')) {
-      add = 1;
+      onChange(Math.min(360, Math.max(0, deg + 1)));
     }
 
     if (ev.key === 'ArrowUp' || ev.key === arrow('end')) {
-      add = -1;
+      onChange(Math.min(360, Math.max(0, deg - 1)));
     }
 
-    onChange(Math.min(360, Math.max(0, deg + add)));
+    if (ev.key === 'Enter' && ev.target instanceof HTMLElement) {
+      if (ev.target.ariaLabel === '0') {
+        onClick(KnobType.start);
+      } else if (ev.target.ariaLabel === '1') {
+        onClick(KnobType.end);
+      }
+    }
   };
 
   useEffect(() => {